使用 jsPDF 将 innerHTML 转为 PDF答案

【问题标题】：innerHTML to PDF with jsPDF使用 jsPDF 将 innerHTML 转为 PDF
【发布时间】：2022-08-10 04:49:38
【问题描述】：

您好，我正在尝试将元素的 innerHTML 放入 PDF 中。生成 PDF 后，PDF 文件为空白。

我究竟做错了什么？

add_action( \'template_redirect\', \'pdf_to\' );
function pdf_to(){
?> 
<script 
src=\"https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js\" 
integrity=\"sha512- 
GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>
<script>
function to_pdf(){
    console.log(\"tutaj1\");
    
    const btn = document.getElementById(\"pdf\");

    btn.addEventListener(\"click\", function(){
    var element = document.getElementById(\"test\");
    console.log(element);
    html2pdf().from(element).save(\'filename.pdf\');
    console.log(\"tutaj2\");
    });
}
if (window.addEventListener) {
    window.addEventListener(\"load\", to_pdf, false);
}
else if (window.attachEvent) {
    window.attachEvent(\"onload\", to_pdf);
}
else {
    window.onload = to_pdf; 
}

</script>
<?php
}

您只是想显示最近创建的 PDF 吗？如果是这样，您可以在 PHP 中将标头重定向到 PDF 本身吗？
或者在保存所有内容后将其显示在 PHP 中。$html2pdf = new Html2Pdf(); $html2pdf->writeHTML($html); $html2pdf->output();
1. 我点击按钮 2. Js 获取 \"test\" 元素 3. 使用 jsPDF 我创建 PDF 文件 4. 然后我下载它但文件是空白的。问题是为什么。
我只想将此“测试”元素保存为 PDF，然后下载。

标签： javascript php wordpress jspdf

【解决方案1】：

是的，我这样做了

            function to_pdf(){
            return new Promise(async (resolve, reject) => {
            let element = document.getElementById('test');

            let opt = {
                margin: 1,
                filename: 'pdf.pdf',
                image: {type: 'jpeg', quality: 0.95},
                html2canvas: {scale: 2, useCORS: true},
                jsPDF: {unit: 'in', format: 'a4', orientation: 'portrait'}
            };

            try {
                const blob = await window.html2pdf().set(opt).from(element).outputPdf('blob', 'pdf.pdf').save();
                resolve(blob);
            } catch (e) {
                reject(e);
            }
    });
}

if (window.addEventListener) {
    window.addEventListener("load", to_pdf, false);
}
else if (window.attachEvent) {
    window.attachEvent("onload", to_pdf);
}
else {
    window.onload = to_pdf; 
}

【讨论】：