其他-How to instantly print marked columns in google sheets with script?

Martí 2020-12-18 17:24:32

The best approach I can think is to make an HTML page with CSS that is prepared to be printed as labels and using the browser for printing. This means making a template and using HtmlService.createTemplateFromFile (see docs) to generate a template, which then is evaluated into a web page. Then using Ui.showModelessDialog (see docs) you show a dialog that can call window.print (see MDN reference) so you can print the contents of the iframe that contains the generated labels.

function printLabels(labels) {
  const labelsPage = HtmlService.createTemplateFromFile('Labels');
  labelsPage.labels = labels;
  SpreadsheetApp.getUi().showModelessDialog(labelsPage.evaluate(), 'Labels');
}

Note that we are using the file Labels. Using another name won't work.

Now we have to make the template (templated HTML docs) of the labels using HTML and CSS which should be designed with printing in mind. Also we need to use JavaScript to trigger the browser's print dialog.

Since printing is hard to implement correctly and debug, and I was motivated enough, I took the time to make a version of something similar that what you have right now. Obviously you'll probably have to change it a bit. I took the sizes from your script but I don't have a label printer —and obviously not your printer— so you'll have to make some tests to ensure that everything works as it should.

<!DOCTYPE html>
<html>
  <head>
    <!-- Basic CSS -->
    <style type="text/css">
      :root {
        font-family: Helvetica, sans-serif;
      }
      
      :root, html, body {
        margin: 0;
        padding: 0;
      }


      article {
        padding: 5pt;
      }
      
      header {
        margin: 0;
        line-height: 1em;
        display: flex;
        justify-content: space-between;
        font-size: 13pt;
      }
      
      p {
        margin: 0.7em;
        padding: 0;
        font-size: 10pt;
      }
    </style>
    
    <!-- CSS to setup the printing -->
    <style type="text/css" media="print">
      @page {
        /* Define the size of the page (label) */
        size: 260pt 100pt;
        
        /* Remove the page information that the browser usually adds */
        margin: 0;
        marks: crop;
      }
      
      body > * {
        /* Make sure there is 1 article per page (label) */
        page-break-after: always;
      }
      
      button {
        /* Hide the print button when actually printing */
        display: none;
      }
    </style>

    <!-- Script that opens the print dialog after the page has completly loaded :) -->
    <script>
      // Show the printing dialog
      window.addEventListener('load', function() {
        window.print();
      })
      // Close after printing
      window.addEventListener('afterprint', function() {
        google.script.host.close();
      });
    </script>
  </head>
  <body>
    <button type="button" onclick="window.print()">Print</button>
    <? for (let label of labels) { ?>
    <article>
      <header>
        <div><?= label[0] ?></div>
        <div><?= label[1] ?>mm</div>
      </header>
      <p><?= label[2] ?></p>
      <p><?= label[3] ?></p>
    </article>
    <? } ?>
  </body>
</html>

Now you can call printLabels with an array of labels to print (in your case the data variable should work). Notice that this will print all the labels given, so if you'd like only print 4, you'should only send 4 to that function.

References and further reading

Kubuniunio 2020-12-18 11:37:49

thanks a lot for your time! i will give it a try :)

Rafa Guillermo 2020-12-21 08:23:12

@Kubuniunio For documentation purposes if you can, please accept the answer (✓) that's been helpful to you - it helps other people that have the same issue in the future find the solution too :)

How to instantly print marked columns in google sheets with script?

References and further reading

热门帖子

热门github