搞定！Vue搞定页面导出为PDF、Word文件，快快收藏！

2022-11-10 20:37:11

在网页应用开发中，经常需要将页面中的内容以特定格式保存下来。例如，用户可能希望将一个报表或文档导出为PDF或Word格式。使用Vue.js可以便捷地实现这一需求。

导出为PDF

为了将Vue生成的页面导出为PDF，可采用html2canvas和jsPDF两个库结合的方式进行处理。这种方式首先通过html2canvas截取DOM元素内容，然后利用jsPDF将其转换成PDF格式。

安装依赖

在使用这两个库之前，需先安装它们：

npm install html2canvas jspdf --save

实现代码示例

假设页面上有一个按钮点击后将导出PDF文件：

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export default {
  methods: {
    generatePdf() {
      const element = document.getElementById('content-to-print');
      
      html2canvas(element).then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();
        
        // Add image to PDF
        pdf.addImage(imgData, 'PNG', 15, 40, 180, 160);
        pdf.save('download.pdf');
      });
    }
  },
}

操作步骤

使用html2canvas将DOM元素转换为Canvas图像。
利用jsPDF创建一个PDF文档，并添加从第一步得到的图像数据。
调用.save()方法，保存生成的PDF文件。

导出为Word

导出Word文件可以通过使用file-saver库和将页面内容转换成DOC格式来实现。这里主要利用纯文本或HTML转Word的技术。

安装依赖

npm install file-saver --save

实现代码示例

以下是一个简单的例子，展示如何导出一个包含Vue模板渲染结果的文件为Word文档：

import { saveAs } from 'file-saver';

export default {
  methods: {
    generateDoc() {
      const content = document.getElementById('content-to-print').innerHTML;
      
      // 创建Blob对象存储文档内容
      const blob = new Blob([`<html><body>${content}</body></html>`], {type: "application/msword"});
      
      saveAs(blob, 'download.doc');
    }
  },
}