Javascript——html生成并预览 PDF及html导出为Word

html生成并预览 PDF

<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> 中预览。

html导出为Word

<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(); // 触发下载
    },