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 中实现页面内容导出的多种方案，可以根据具体需求选择合适的实现方式。