寻求HTML转可搜索可选中PDF的JavaScript解决方案

问题根源 #

你当前使用的ekoopmans版html2pdf，核心逻辑是通过html2canvas把DOM渲染成图片，再插入jsPDF生成的PDF文档。这种生成方式下，PDF内容本质是位图，自然无法进行文本搜索、选中操作。

可行解决方案 #

要生成可搜索的文本型PDF，必须跳过“DOM转图片”的步骤，直接将HTML内容解析为PDF支持的文本元素。以下两种方案可以实现：

方案一：用jsPDF直接解析HTML #

新版jsPDF内置了html()方法，可直接将HTML转换为PDF文本内容，无需依赖html2canvas的图片渲染逻辑。修改你的代码如下：

window.onload = function () {
    document.getElementById("download").addEventListener("click", async () => {
        const allvoice = document.getElementById("allvoice");
        const { jsPDF } = window.jspdf;

        const doc = new jsPDF({
            unit: 'mm',
            format: 'a4',
            orientation: 'landscape'
        });

        // 直接解析HTML生成PDF文本
        await doc.html(allvoice, {
            callback: function (doc) {
                // 添加页码
                const totalPages = doc.internal.getNumberOfPages();
                for (let i = 1; i <= totalPages; i++) {
                    doc.setPage(i);
                    doc.setFontSize(10);
                    doc.setTextColor(100);
                    doc.text(`Page ${i} of ${totalPages}`, doc.internal.pageSize.getWidth() / 2.3, doc.internal.pageSize.getHeight() - 0.8);
                }
                doc.save('myfile.pdf');
            },
            margin: [20, 0],
            autoPaging: 'text',
            x: 0,
            y: 0
        });
    });
};

注意：确保你引入的jsPDF版本支持html()方法，通常需要搭配最新版的jsPDF资源，部分场景下仍需引入html2canvas作为底层依赖，但此时不会将内容转成图片。

方案二：使用pdfmake库生成结构化PDF #

pdfmake通过定义JSON格式的文档结构生成PDF，也可配合html-to-pdfmake工具将HTML转换为对应结构，保留文本可编辑性：

1. 先引入依赖资源：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake@2.4.1/dist/html-to-pdfmake.bundle.min.js"></script>

2. 编写转换代码：

window.onload = function () {
    document.getElementById("download").addEventListener("click", () => {
        const allvoice = document.getElementById("allvoice");
        // 将HTML转换为pdfmake支持的结构
        const content = htmlToPdfmake(allvoice.innerHTML);
        
        const docDefinition = {
            pageOrientation: 'landscape',
            pageSize: 'A4',
            content: content,
            margin: [20, 0],
            // 添加页码 footer
            footer: function(currentPage, pageCount) {
                return {
                    text: `Page ${currentPage} of ${pageCount}`,
                    fontSize: 10,
                    color: '#666',
                    alignment: 'right',
                    margin: [0, 0, 20, 10]
                };
            }
        };

        pdfMake.createPdf(docDefinition).download('myfile.pdf');
    });
};

注意事项 #

• 两种方案对复杂CSS样式的支持都有限，比如阴影、渐变、复杂定位可能无法完全还原；
• 若页面包含大量需要Canvas渲染的元素（如图表），这类元素仍会以图片形式存在于PDF中，但文本部分依然可搜索；

内容的提问来源于stack exchange，提问作者Nguyễn Sơn