vue2中导出页面内容为word

在Vue2中导出页面内容为Word，可以使用jsPDF和html2canvas这两个库。

首先安装这两个库：

npm install jspdf html2canvas --save

然后在需要导出的页面中添加一个按钮，点击按钮时触发导出操作：

<template>
  <div>
    <h1>这是需要导出的页面内容</h1>
    <p>这里是内容...</p>
    <button @click="exportWord">导出为Word</button>
  </div>
</template>

在script中引入jsPDF和html2canvas，并编写导出操作的代码：

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

export default {
  name: 'ExportWord',
  methods: {
    exportWord() {
      // 获取需要导出的HTML元素
      const element = document.getElementById('export-content')

      // 使用html2canvas将HTML元素转为canvas
      html2canvas(element).then(canvas => {
        // 计算图片宽高比
        const imgWidth = 210
        const pageHeight = 297
        const imgHeight = canvas.height * imgWidth / canvas.width
        let heightLeft = imgHeight

        // 创建一个jsPDF实例
        const pdf = new jsPDF('p', 'mm', 'a4')

        // 将canvas转为图片形式，并添加到PDF中
        const imgData = canvas.toDataURL('image/png')
        pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight)

        // 逐页添加图片到PDF中
        while (heightLeft >= 0) {
          const position = heightLeft - pageHeight
          pdf.addPage()
          pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight)
          heightLeft -= pageHeight
        }

        // 保存PDF文件
        pdf.save('export.pdf')
      })
    }
  }
}

注意，这里使用了`element`变量获取需要导出的HTML元素，要确保该元素在页面中存在且有正确的`id`值。

此外，为了让导出的PDF文件更加美观，可以在HTML中添加一些CSS样式来调整页面布局和样式。