GASでスプレッドシートをPDF化してサイトに貼り付けたい。

1.はじめに

1.1 どんなところで必要か

GoogleAppsScript(以下GAS)でServerLessのサイトを作っている人も多いと思います。同時にデータベースをGoogleSpreadSheetにする人が多数だと思います。今回はスプレッドシートの内容をPDF化して表示したいというときに引っかかるポイントを解説していきます。

基本知識：GoogleAppsScriptでWebサイトを作るときに必要な基本知識

1.2 まず、なにが問題か

• スプレッドシートをPDF形式にExportする。
• PDF形式のデータをサイトに貼り付ける。

この二つがポイントです。

1.SpreadSheetをPDFにエクスポート

1.1 下準備

まずはGoogleDriveにディレクトリを作りましょう。エクスポートしたPDFを一時的に保存し、URLを取得する必要があります。どこでも大丈夫です。作ったらディレクトリを開き、そのURLをメモしましょう。

https://drive.google.com/drive/u/1/folders/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xの部分のみつかうのでそこだけでも大丈夫です。xの部分をfolderidとします。

次に、エクスポートするスプレッドシートを開きシートを選択してください。

https://docs.google.com/spreadsheets/d/yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy/edit#gid=000000000

yの部分をssid、0の部分をsheetidとします。

1.2 エクスポート

コード.gs

function printToPDF() {
  return createPDF("xxxxxxxx...", "yyyyyyy...", "00000...", "~~~.pdf");
}

// PDF作成関数　引数は（folderid:保存先フォルダID, ssid:PDF化するスプレッドシートID, sheetid:PDF化するシートID, filename:PDFの名前）
function createPDF(folderid, ssid, sheetid, filename) {

  // スプレッドシートをPDFにエクスポートするためのURL。このURLに色々なオプションを付けてPDFを作成
  var url = "https://docs.google.com/spreadsheets/d/SSID/export?".replace("SSID", ssid);

  // 範囲をURL風に変換
  var printRange = encodeURIComponent("A1:BE45");

  // PDF作成のオプションを指定
  var opts = {
    exportFormat: "pdf",  // ファイル形式の指定 pdf / csv / xls / xlsx
    format: "pdf",        // ファイル形式の指定 pdf / csv / xls / xlsx
    size: "B5",           // 用紙サイズの指定 legal / letter / A4 など
    portrait: "false",    // true → 縦向き、false → 横向き
    fitw: "true",         // ページをフィットさせるかどうか。trueでフィット、falseで原寸大。
    sheetnames: "false",  // シート名をPDF上部に表示するか
    printtitle: "false",  // スプレッドシート名をPDF上部に表示するか
    pagenumbers: "false", // ページ番号の有無
    gridlines: "false",   // グリッドラインの表示有無
    fzr: "false",         // 固定行の表示有無
    gid: sheetid,         // シートIDを指定 sheetidは引数で取得
    range: printRange,    // 範囲
    top_margin: "0",      // 上余白
    bottom_margin: "0",   // 下余白
    left_margin: "0",     // 左余白
    right_margin: "0",    // 右余白
    scale: "3"            // なんか幅に合わせたり高さに合わせたりできるらしい。
  };

  var url_ext = [];

  // 上記のoptsのオプション名と値を「=」で繋げて配列url_extに格納
  for (optName in opts) {
    url_ext.push(optName + "=" + opts[optName]);
  }

  // url_extの各要素を「&」で繋げる
  var options = url_ext.join("&");
  // API使用のためのOAuth認証
  var token = ScriptApp.getOAuthToken();
  // PDFファイルの保存先となるフォルダをフォルダIDで指定
  var folder = DriveApp.getFolderById(folderid);
  SpreadsheetApp.flush();
  // PDF作成
  var blob = UrlFetchApp.fetch(url + options, { headers: { 'Authorization': 'Bearer ' + token }, muteHttpExceptions: true }).getBlob().setName(filename);
  // 存在するなら削除
  delExistsFile(folder, filename);
  // 保存
  var newFile = folder.createFile(blob);
  // 共有設定をする：「リンクを知っている人」が「閲覧可能」
  newFile.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);
  // ダウンロードリンクを取得
  var newFileUrl = newFile.getUrl();
  // リンクを編集してPDFを埋め込むためのURLにする。そしてそれを返却。
  return newFileUrl.slice(0, -17) + "preview";
}

// 同じ名前のファイルが存在するなら削除する関数
function delExistsFile(folder, fileName) {
  var files = folder.getFilesByName(fileName);
  
  while (files.hasNext()) {
    var file = files.next();
    if(fileName == file.getName()) {
      folder.removeFile(file);
      return true;
    }
  }
  
  return false;
}

これら以外にもたくさんのoptionが存在します。詳しくはこちら。
解説はコメントを見てください。
参考↓
Google Apps Script で指定したシートをPDF化するスクリプト

2.HTMLに埋め込み

jQuery導入済みです。

2.1 HTML

main.html

<iframe id="outputPDF" src=""></iframe>

srcの部分にURLを差し替えます。

2.2 Js

main.html

<script>
  google.script.run.withSuccessHandler(function(result) {
    var url = result;
    // 差し替え
    $("#outputPDF").attr("src", url + "");
  }).withFailureHandler(function(result) {
    alert("FAILD:" + result);
  })
  .printToPDF();
</script>

まとめ

調べてもそのようなことをやっている人はいなかったのでやってみました。ファイルを埋め込む際にはリンクを作る必要があるのでGoogleDriveは神ですね。それではまた。

Twitter→https://twitter.com/Cyber_Hacnosuke