vue实现页面导出
Vue 实现页面导出为 PDF 或图片
使用 html2canvas 和 jsPDF 导出为 PDF
安装依赖库：
npm install html2canvas jspdf --save在 Vue 组件中实现导出功能：
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
export default {
methods: {
exportToPDF() {
const element = document.getElementById('export-content')
html2canvas(element).then(canvas => {
const imgData = canvas.toDataURL('image/png')
const pdf = new jsPDF('p', 'mm', 'a4')
const imgWidth = 210
const pageHeight = 295
const imgHeight = canvas.height * imgWidth / canvas.width
let heightLeft = imgHeight
let position = 0
pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight)
heightLeft -= pageHeight
while (heightLeft >= 0) {
position = heightLeft - imgHeight
pdf.addPage()
pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight)
heightLeft -= pageHeight
}
pdf.save('exported-page.pdf')
})
}
}
}使用 vue-json-excel 导出为 Excel
安装依赖：
npm install vue-json-excel --save在组件中使用：
import JsonExcel from 'vue-json-excel'
export default {
components: {
JsonExcel
},
data() {
return {
json_data: [
{name: '张三', age: 30},
{name: '李四', age: 25}
],
fields: {
'姓名': 'name',
'年龄': 'age'
},
filename: '用户数据.xls'
}
}
}模板中使用：
<download-excel
:data="json_data"
:fields="fields"
:name="filename">
导出Excel
</download-excel>使用 FileSaver.js 导出文本文件
安装依赖：
npm install file-saver --save在组件中使用：
import { saveAs } from 'file-saver'
export default {
methods: {
exportTextFile() {
const content = '这是要导出的文本内容'
const blob = new Blob([content], {type: 'text/plain;charset=utf-8'})
saveAs(blob, 'exported-file.txt')
}
}
}使用 vue-table-export 导出表格数据
安装依赖：
npm install vue-table-export --save在组件中使用：
import VueTableExport from 'vue-table-export'
export default {
components: {
VueTableExport
},
data() {
return {
tableData: [
{id: 1, name: '产品A', price: 100},
{id: 2, name: '产品B', price: 200}
],
exportFields: {
'ID': 'id',
'产品名称': 'name',
'价格': 'price'
}
}
}
}模板中使用：
<vue-table-export
:data="tableData"
:fields="exportFields"
filename="产品数据"
sheetname="产品">
导出表格数据
</vue-table-export>这些方法提供了在 Vue 中实现页面内容导出的多种方案，可以根据具体需求选择合适的实现方式。
