Blazor WebAssembly项目中如何用JavaScript读取HTML文件？

数据老陈

2026-8-6

在Blazor WebAssembly中读取HTML模板文件并生成PDF

你可以通过Fetch API读取wwwroot/html目录下的pdfTempltor.html文件内容，再将其传入html2pdf工具生成PDF。以下是修改后的代码和说明：

修改后的JavaScript代码

async function generatePDF() {
    // 基于当前JS文件路径，构造HTML模板的相对路径
    const response = await fetch('../html/pdfTempltor.html');
    // 将响应转为文本格式的HTML内容
    const htmlContent = await response.text();
    
    var opt = {
        margin: 1,
        filename: 'html2pdf_example.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    
    // 使用读取到的HTML内容生成并保存PDF
    html2pdf().set(opt).from(htmlContent).save();
}

关键说明

路径计算：因为generatePDF.js在wwwroot/js目录，目标HTML文件在wwwroot/html，所以相对路径用../html/pdfTempltor.html，确保能正确定位到模板文件。
异步处理：Fetch API是异步操作，因此需要将generatePDF标记为async函数，并通过await等待文件读取完成，避免未拿到内容就执行PDF生成逻辑。
资源路径兼容性：如果HTML模板里引用了图片、CSS等资源，建议使用根相对路径（比如/css/pdf-style.css对应wwwroot/css下的文件），确保生成PDF时资源能正常加载。