How to pass CSS href to inline CSS in app script?

Question

UPDATE:

I need to save an HTML webpage as a pdf in my google Drive. I am using app script.
However, the PDF is rendered differently from the HTLM page. I need the PDF to be the same as the HTML. FROM RESEARCH I DISCOVERED THAT EXTERNAL CSS IS NOT RENDERED PROPERLY, ONLY INLINE CSS.

I have an HTML page and I need to transform the external CSS into inline CSS. I need to do this using an app script.

Is it possible?

EDIT: MORE DETAILS -- HERE IS MY FUNCTION IN APPSCRIPT AND MY HTML CSS HEADER

    function downloadFile() {
    
    var fileURL = "https://www.....
    var folder = "primes"
    var fileName = "";
    var fileSize = "";
    
    var response = UrlFetchApp.fetch(fileURL, {
        headers: { Authorization: 'Bearer ' + ScriptApp.getOAuthToken() },
    })
    var htmlBody = response.getContentText();
    var rc = response.getResponseCode();
    
    if (rc == 200) {
    
    var blob = Utilities.newBlob(htmlBody, 
    MimeType.HTML).getAs('application/pdf').setName('Nota.pdf');
    var folder = DriveApp.getFolderById("1gBA8YCs3PH7v7CNl3nlsjNqYzhOxhjYa");
    if(folder != null){
      var file = folder.createFile(blob);
      fileName = file.getName()
      fileSize = file.getSize()
     }
    }
    var fileInfo = {'rc':rc,"filename": fileName, "fileSize":fileSize}
    
    Logger.log(fileInfo)
    
     }

    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Bling - </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://www.bling.com.br/libs/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://www.bling.com.br/libs/utils-1632934481.js"></script> <link rel="stylesheet" type="text/css" href="https://www.bling.com.br/styles/danfe.css" />
    <style>
        table.grid tr td{
            /*padding:2px;*/

The output I get is totally not rendered correctly

I want to print the HTML to pdf in app script. However, rendering is lost if the css is external. CSS must be inline so that the rendering is ok. — user3284182
– user3284182, Commented Oct 6, 2021 at 18:44
Just an idea, not sure if it works - what happens if you have the external CSS defined as media='print'? — Azu
– Azu, Commented Oct 6, 2021 at 19:08
Can you show how you did your external css so we can see why it doesn't render properly? You might be doing something wrong in the first place. — NightEye
– NightEye, Commented Oct 6, 2021 at 19:28
It's more important that you edit your question with what you are actually trying to achieve. It sounds like from your comments that you are trying to get the browser to print to pdf and have it look identical to the page as it was displayed in the browser. If that's right, or if something like that is right, then that's what you need to edit in to the question, because while it is definitely possible to convert all external CSS to inline, it's going to be a ton of work and still might not achieve your real goal. — Instance Hunter
– Instance Hunter, Commented Oct 6, 2021 at 20:40

NightEye · Accepted Answer · 2021-10-06 23:12:32Z

1

Just replace the external css with the actual value with padded style tags.

Script:

var htmlBody = response.getContentText();

// replace external css with the actual css, padded with style tags
var externalCss = `<link rel="stylesheet" type="text/css" href="https://www.bling.com.br/styles/danfe.css" />`;
htmlBody = htmlBody.replace(externalCss, `<style>${UrlFetchApp.fetch('https://www.bling.com.br/styles/danfe.css').getContentText()}</style>`)

var rc = response.getResponseCode();

If this doesn't work due to captcha. (I'm not sure if captcha will cause you some issues when fetching). Copy the actual css (pad it with tags), save it in a file and include it in your string before converting to blob by using:

HtmlService.createHtmlOutputFromFile(filename).getContent()

Output:

edited Oct 6, 2021 at 23:12

answered Oct 6, 2021 at 22:07

NightEye

11.3k2 gold badges8 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass CSS href to inline CSS in app script?

1 Answer 1

Script:

Output:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Script:

Output:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related