使用 html2canvas 和 jspdf 创建的 PDF 文件 - pdf 中不允许选择文本答案

【问题标题】：PDF file created with html2canvas and jspdf - Text selection not allowed in the pdf使用 html2canvas 和 jspdf 创建的 PDF 文件 - pdf 中不允许选择文本
【发布时间】：2020-09-16 16:46:55
【问题描述】：

我正在尝试创建一个允许从 HTML 页面创建 pdf 文件的脚本。我正在使用库 mustache、jspdfhtml2canvas 和 jquery

一切正常：mustache 检索数据并创建变量。页面中全部正确显示。

我创建了一个生成 pdf 的函数，它正在工作：

            function generatePDF() {                

                html2canvas(document.getElementById('content'), { scale: 1, width: 2000, height: 9000 }).then(canvas => {
                    var imgData = canvas.toDataURL("image/jpeg");
                    var pdf = new jsPDF('p', 'mm', [520, 1080]);
                    pdf.addImage(imgData, 'JPEG', 10, 10);

                    pdf.save("Test.pdf");
                });

            }

点击生成按钮后，pdf就生成了。然而，无法选择 pdf 中的文本。我不知道如何更新脚本，因为我需要将此功能添加到 pdf 文件中。

这是我的代码：

    <html> 
    <head> 
        <meta charset="utf-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>PDF CREATOR</title>      
        <link id="BootstrapCSS" rel="stylesheet" type="text/css" href="../lib/bootstrap.min.css">       
        <script type="text/javascript" src="/_layouts/15/jquery/jquery-2.1.4.min.js"></script>
        <script src="../lib/mustache/mustache.js"></script>     
        <script src="../lib/jspdf/html2canvas.js"></script>
        <script src="../lib/jspdf/jspdf.debug.js"></script>     

    </head>

    <body onload="renderHTML()">
        <div id="target">Loading...</div>
        <script id="template" type="x-tmpl-mustache">
            <div class="container-fluid">
                <button type="button" class="btn btn-primary btn-lg" onclick="generatePDF()">Generate PDF</button>
                <div id="content"><br />
                    <table id="table01" class="table table-bordered table_border">                      
                        <tbody> 
                            <tr>
                                <td colspan="2"><b>CONTRACT:</b> <strong class="red">{{ subject }}</strong></td>
                            </tr>                           
                            <tr>
                                <td><b>RESPONSIBLE UNIT:</b> <strong class="red">{{ unit }}</strong></td>
                                <td><b>CONTRACT NUMBER:</b> {{ contractNumber }}</td>
                            </tr>
                        </tbody>                    
                    </table>

                </div>
            </div>
        </script>

        <script>

            $(document).ready(function() {      
                var contractId = $.urlParam('contractId');

                if (ContractId) {
                    var contract = getContractById(contractId);

                    data.contractId = contractId;                   
                    data.subject = contract.Title;
                    data.unit = contract.Unit;
                    data.contractNumber = contract.ContractNumber;
                }
            });

            var data = {
                contractId: '',
                subject: '',
                unit: '',
                contractNumber: ''
            };

            function renderHTML() {
                var template = document.getElementById('template').innerHTML;
                var rendered = Mustache.render(template, data);
                document.getElementById('target').innerHTML = rendered;
            }

            function generatePDF() {                

                html2canvas(document.getElementById('content'), { scale: 1, width: 2000, height: 9000 }).then(canvas => {
                    var imgData = canvas.toDataURL("image/jpeg");
                    var pdf = new jsPDF('p', 'mm', [520, 1080]);
                    pdf.addImage(imgData, 'JPEG', 10, 10);

                    pdf.save(Test.pdf);
                });

            }
        </script>
    </body> 
</html>

你能帮我解决这个问题吗？

提前感谢您的帮助。

【问题讨论】：

标签： jquery pdf jspdf mustache html2canvas

【解决方案1】：

恕我直言，由于它使用画布，它会为您呈现的 HTML 文档拍摄一张图片，然后使用该图片创建一个 pdf。它不会像您期望的那样构建 pdf 文档。由于文档是图像，因此您无法选择文本。

【讨论】：