How to read a html file in JavaScript?

Question

I am working on a blazorWebAssmebly project.

I want to convert html to pdf, for that I am using jsPDF ( javascript).

function generatePDF() {
    const element ="here_I_want_to_read_the_Html_file"; //
    var opt = {
        margin: 1,
        filename: 'html2pdf_example.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    html2pdf().set(opt).from(element).save();
}

The folder structre

-wwwroot

    -js

       -generatePDF.js

    -html

       -pdfTempltor.html

How can I read the html file inside javaScript file

Does this answer your question? [Get HTML code using JavaScript with a URL](https://stackoverflow.com/questions/6375461/get-html-code-using-javascript-with-a-url) — Jeppe, Jan 07 '23 at 11:47
This question is how to read a url. I am asking, I have a html file, how can I read inside javascript function — hanushi, Jan 07 '23 at 12:06
The `from` function takes a HTML-string or a HTML-element. Either way, you need to fetch it (e.g. using the link I posted). Your clients won't have access to the files on your server, so you need to serve them. — Jeppe, Jan 07 '23 at 13:41

Ahmad Adibzad · Answer 1 · 2023-01-17T19:16:26.950

3

You cannot directly access to server files with JavaScript. You have to create a webservice in the backend and call it with JavaScript.

edited Jan 17 '23 at 19:16

answered Jan 07 '23 at 13:48

Ahmad Adibzad

501
2
6
14

score -1 · Answer 2 · answered Jan 07 '23 at 13:52

you fetch the html file, put it in your const element...

function to fetch file

function loadHTML(file, callback) {
    fetch(file)
        .then((response) => response.text())
        .then((respText) => {
            if (callback && typeof (callback) === "function") {
                callback(respText);
            }
        });
}

calling the function

loadHTML('your html file with the right path from here', function (data) {
   const element = data;
   ...
   your code
   ...
}

Or another structure if you prefer, but the fetch will be more or less the same

How to read a html file in JavaScript?

2 Answers2