在纯前端快速实现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样式。