vue 内容导出word文件

在 Vue 中，可以使用 jsPDF 和 html2canvas 库将页面内容导出为 Word 文件。

1. 安装 jsPDF 和 html2canvas 库：

npm install jspdf html2canvas --save

2. 导入库：

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

3. 创建一个方法，将页面内容导出为 PDF 文件：

export default {
  methods: {
    exportToWord() {
      const filename = 'example.docx';
      const element = document.querySelector('#content'); // 需要导出的内容的 DOM 元素
      html2canvas(element).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF('p', 'mm', 'a4');
        const width = pdf.internal.pageSize.getWidth();
        const height = canvas.height * width / canvas.width;
        pdf.addImage(imgData, 'PNG', 0, 0, width, height);
        pdf.save(filename);
      });
    }
  }
}

4. 在页面中添加一个按钮，调用导出方法：

<template>
  <div>
    <div id="content">
      <!-- 这里是需要导出的内容 -->
    </div>
    <button @click="exportToWord">导出 Word 文件</button>
  </div>
</template>