当前位置：首页 > VUE

vue实现页面导出

2026-01-15 22:31:55VUE

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

在组件中使用：

vue实现页面导出

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

在组件中使用：

vue实现页面导出

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

标签: 页面 vue

分享给朋友：

js实现vue

Vue.js 的基本实现方法在 JavaScript 中实现 Vue.js 的功能，可以通过直接引入 Vue 库或使用现代构建工具（如 Vite 或 Webpack）。以下是几种常见的实现方式：…

vue实现 toast

Vue 实现 Toast 组件在 Vue 中实现 Toast 组件可以通过多种方式完成，以下是几种常见的方法：使用全局组件和事件总线创建一个全局的 Toast 组件，并通过事件总线或 Vue…

vue实现博客

Vue 实现博客的基本步骤使用 Vue.js 实现一个博客系统可以分为前端和后端两部分。以下是基于 Vue 的前端实现方案，后端可以选择 Node.js、Django 或其他框架。项目初始化使…

vue diff实现

Vue Diff 算法实现原理 Vue 的虚拟 DOM Diff 算法（即 patch 过程）是其高效渲染的核心，主要通过对比新旧虚拟节点的差异，最小化 DOM 操作。以下是关键实现要点：同层级比…

vue实现选择

Vue 实现选择功能的方法在 Vue 中实现选择功能可以通过多种方式完成，以下介绍几种常见的实现方法。使用 v-model 绑定单选通过 v-model 可以轻松实现单选功能。以下是一个简单的…

vue实现ide

Vue 实现 IDE 的基本思路使用 Vue 构建一个简易的集成开发环境（IDE）需要整合代码编辑器、文件管理、终端模拟等功能。以下是关键实现步骤和推荐工具。核心功能模块代码编辑器使…

vue实现页面导出