前端：纯前端快速实现html导出word和pdf

在纯前端快速实现HTML导出为Word和PDF的方法，可以使用html2canvas和jsPDF库。以下是实现的示例代码：

首先，确保安装了这两个库：

npm install html2canvas jspdf

然后，在前端代码中引入这两个库，并添加导出功能：

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
 
// 导出为Word
function exportToWord(selector) {
    var element = document.querySelector(selector);
    var wordContent = element.outerHTML;
    var blob = new Blob(['\ufeff', wordContent], {
        type: 'application/msword'
    });
 
    // 指定文件名
    var fileName = 'document.doc';
    // 创建链接元素
    var link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    // 触发下载
    link.click();
    // 清除引用
    window.URL.revokeObjectURL(link.href);
}
 
// 导出为PDF
function exportToPDF(selector, pdfName) {
    var element = document.querySelector(selector);
    html2canvas(element).then(canvas => {
        var pdf = new jsPDF('p', 'mm', 'a4');
        var imgData = canvas.toDataURL('image/png');
        var width = pdf.internal.pageSize.getWidth();
        var height = pdf.internal.pageSize.getHeight();
        pdf.addImage(imgData, 'PNG', 0, 0, width, height);
        pdf.save(pdfName + '.pdf');
    });
}
 
// 使用示例
exportToWord('#content'); // 导出HTML元素为Word文档
exportToPDF('#content', 'myPDF'); // 导出HTML元素为PDF文件，命名为myPDF.pdf

在上述代码中，exportToWord函数将HTML元素导出为Word文档，而exportToPDF函数将HTML元素导出为PDF文件。两个函数都接受一个选择器参数，该参数指定了要导出的HTML元素。Word文档的文件名在exportToWord函数内指定，而PDF文件名作为exportToPDF函数的第二个参数传入。

请确保在一个真实的Web环境中使用这些函数，因为某些浏览器安全设置可能会阻止文件下载。此外，html2canvas可能需要一些调整才能正确处理更复杂的HTML结构和CSS样式。