Search code examples
google-apps-scriptweb-applicationsdownloadgoogle-docsexport-to-pdf

Download a created Google Doc from a deployed web app


I've created a script that, when deployed as a web app, asks the user for some input, and creates and writes to a Google document.

Apparently, downloading the Google document from the script is not possible, and the next best thing seems to convert the doc and save it in My Drive.

I have tried this very simple approach, inspired by Convert Google Doc to PDF using Google Script Editior

Project is deployed as a web app

Code.gs:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function editDoc(data) {
  let doc = DocumentApp.create("Title");
  let body = doc.getBody();
  body.setText(data);
  
  docblob = doc.getAs('application/pdf');

  docblob.setName(doc.getName() + ".pdf");
  let file = DriveApp.createFile(docblob);
}

Index.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form onsubmit="edit()">
      <input type="text" id="input">
      <input type="submit" id="sub" value="Submit">
    </form>
    <script>
      function edit() {
        google.script.run.editDoc(document.getElementById("input").value);
      }
    </script>
  </body>
</html>

As a result, this adds a pdf to my google drive, which should be the pdf form of the created google doc, however it is blank.


Solution

  • I believe your goal as follows.

    • You want to create new Google Document including the value from the input tag.
    • And, you want to export the Google Document as a PDF file.
    • You want to achieve this using Google Apps Script.

    Modification points:

    • I think that the reason of however it is blank is that the Document is not saved.
    • In order to download the PDF file, I would like to propose to convert the PDF data to the base64 data and set it as the data URL, and then, download it.

    When above points are reflected to your script, it becomes as follows.

    Modified script:

    Google Apps Script side: Code.gs
    function doGet() {
      return HtmlService.createHtmlOutputFromFile('Index');
    }
    
    function editDoc(data) {
      let doc = DocumentApp.create("Title");
      let body = doc.getBody();
      body.setText(data);
      doc.saveAndClose();
      return {
        data: "data:application/pdf;base64," + Utilities.base64Encode(doc.getBlob().getBytes()),
        filename: doc.getName() + ".pdf"
      };
    }
    
    HTML & Javascript side: Index.html
    <!DOCTYPE html>
    <html>
      <head>
        <base target="_top">
      </head>
      <body>
        <form onsubmit="event.preventDefault(); edit();">
          <input type="text" id="input">
          <input type="submit" id="sub" value="Submit">
        </form>
        <script>
          function edit() {
            google.script.run.withSuccessHandler(({data, filename}) => {
              const a = document.createElement("a");
              document.body.appendChild(a);
              a.download = filename;
              a.href = data;
              a.click();
            }).editDoc(document.getElementById("input").value);
          }
        </script>
      </body>
    </html>
    
    • I thought that in this case, a simple button can be also used instead of the submit button.
    • In the case of Google Docs, when a blog is retrieved, in the current stage, the blob is the PDF format.
    • In this modified script, when a text is inputted and a button is clicked, a PDF file is downloaded to the local PC.

    Note:

    • In your script, it seems that Web Apps is used. In this case, when the script of Web Apps is modified, please redeploy the Web Apps as new version. By this, the latest script is reflected to the Web Apps. Please be careful this.

    References: