Help us understand the problem. What is going on with this article?

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の部分をssid0の部分を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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away