在
Vue2
中导出页面内容为Word，可以
使用jsPDF和
html2canvas这两个库。
首先安装这两个库：
```
npm install
jspdf
html2canvas --save
```
然后在需要
导出的
页面中添加一个按钮，点击按钮时触发
导出操作：
```html
<template>
<div>
<h1>这是需要
导出的
页面内容</h1>
<p>这里是
内容...</p>
<button @click="exportWord">
导出为Word</button>
</div>
</template>
```
在script
中引入
jsPDF和
html2canvas，并编写
导出操作的代码：
```javascript
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样式来调整
页面布局和样式。
380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
