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, Oct 06 '21 at 18:44
Just an idea, not sure if it works - what happens if you have the external CSS defined as media='print'? — Azu, Oct 06 '21 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, Oct 06 '21 at 19:28
I have edited my question with more details so that you can check my code — user3284182, Oct 06 '21 at 19:39
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, Oct 06 '21 at 20:40
I have provided a much simpler approach without transforming external into inline CSS @user3284182. See answer below. — NightEye, Oct 06 '21 at 22:55

NightEye · Accepted Answer · 2021-10-06T23:12:32.190

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()

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

1 Answers1

Script:

Output:

Linked