如何读取JavaScript中的一个html文件？

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

Answer 1

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

Answer 2

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