html_PDF_0">html生成并预览 PDF

html" title=javascript>javascript"><template><div><div ref="content"><!-- 这里放置你想要转换为 PDF 的 HTML 内容 --><h1>标题</h1><p>这是一些内容。</p></div><button @click="exportToPDF">生成并预览 PDF</button><iframe ref="pdfPreview" style="width: 100%; height: 500px; border: 1px solid #ccc;"></iframe></div>
</template><script>npm install html2pdf.js
import html2pdf from 'html2pdf.js';export default {methods: {exportToPDF() {const content = this.$refs.content;const pdfPreview = this.$refs.pdfPreview;html2pdf().from(content).toPdf().get('pdf').then(function(pdf) {pdfPreview.src = URL.createObjectURL(new Blob([pdf.output('blob')], { type: 'application/pdf' }));});}}
};
</script>在上述示例中，我们使用 html2pdf.js 将 HTML 内容转换为 PDF，并将生成的 PDF 文件预览在一个 <iframe> 中。当用户点击“生成并预览 PDF”按钮时，页面中的 HTML 内容将被转换为 PDF 文件，并在 <iframe> 中预览。

htmlWord_44">html导出为Word

html" title=javascript>javascript"><template><div><div ref="content"><!-- 这里放置你想要转换为 PDF 的 HTML 内容 --><h1>标题</h1><p>这是一些内容。</p></div><button @click="exportToWord">导出为Word</button><iframe ref="pdfPreview" style="width: 100%; height: 500px; border: 1px solid #ccc;"></iframe></div>
</template>
npm install html-docx-js
import htmlDocx from "html-docx-js/dist/html-docx";exportToWord() {const html = this.$refs.content.innerHTML;const converted = htmlDocx.asBlob(html); // 转换HTML为Blob对象// 使用FileSaver保存文件saveAs(converted, "document.pdf");// 创建一个FormData对象来上传文件const formData = new FormData();formData.append("file", converted);console.log(formData, "405");return;// 创建一个链接元素用于下载const link = document.createElement("a");link.href = URL.createObjectURL(converted);link.download = "document.docx"; // 设置下载文件名link.click(); // 触发下载},