vue实现word，pdf文件的导出功能

实现word，pdf文件的导出功能，需要使用vue和一些插件。以下是完整的攻略。

1. 安装依赖

首先需要在项目中安装相关依赖：

npm install --save file-saver xlsx pdfmake

file-saver：实现文件下载的插件
xlsx：实现excel文件导出的插件
pdfmake：实现pdf文件导出的插件

2. 配置操作

在vue.config.js中配置webpack操作：

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 6 // 将代码分块为6个块
      })
    ]
  }
}

上面的操作是为了解决pdf导出时出现的“Maximum call stack size exceeded”错误。

3. 示例1：实现excel文件导出

以用户列表为例，实现将用户数据导出为excel文件的功能。

<template>
  <div>
    <button @click="handleDownloadExcel">下载Excel文件</button>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>用户名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user, index) in userList" :key="user.id">
          <td>{{ index+1 }}</td>
          <td>{{ user.userName }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'
import fileSaver from 'file-saver'

export default {
  data() {
    return {
      userList: [
        {
          id: 1,
          userName: '张三',
          age: 23,
          gender: '男'
        }
      ]
    }
  },

  methods: {
    handleDownloadExcel() {
      const data = this.userList
      const sheetName = '用户列表'
      const fileName = '用户列表.xlsx'

      const wb = XLSX.utils.book_new()
      const ws = XLSX.utils.json_to_sheet(data)
      XLSX.utils.book_append_sheet(wb, ws, sheetName)

      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' })
      const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
      return fileSaver.saveAs(blob, fileName)
    }
  }
}

function s2ab(s) {
  const buf = new ArrayBuffer(s.length)
  const view = new Uint8Array(buf)
  for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
  return buf
}
</script>

具体实现过程如下：

引入xlsx和file-saver插件
定义数据和工具函数s2ab
编写handleDownloadExcel方法，将用户数据转换成sheet，然后将sheet插入工作流中，并将工作流写入二进制文件
最后通过file-saver插件将文件保存

4. 示例2：实现pdf文件导出

以商品列表为例，实现将商品数据导出为pdf文件的功能。

<template>
  <div>
    <button @click="handleDownloadPdf">下载PDF文件</button>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>商品名称</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(product, index) in productList" :key="product.id">
          <td>{{ index+1 }}</td>
          <td>{{ product.productName }}</td>
          <td>{{ product.price }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import pdfMake from 'pdfmake/build/pdfmake'
import pdfFonts from 'pdfmake/build/vfs_fonts'
import fileSaver from 'file-saver'

pdfMake.vfs = pdfFonts.pdfMake.vfs

export default {
  data() {
    return {
      productList: [
        {
          id: 1,
          productName: '商品1',
          price: 100
        }
      ]
    }
  },

  methods: {
    handleDownloadPdf() {
      const data = this.productList

      const tableBody = []
      tableBody.push([{ text: '序号', style: 'tableHeader' }, { text: '商品名称', style: 'tableHeader' }, { text: '价格', style: 'tableHeader' }])
      data.forEach(function (row) {
        const rowData = []
        rowData.push(row.id)
        rowData.push(row.productName)
        rowData.push(row.price)
        tableBody.push(rowData)
      })

      const docDefinition = {
        content: [
          { text: '商品列表', style: 'header' },
          { table: { headerRows: 1, body: tableBody }, layout: 'lightHorizontalLines' }
        ],

        styles: {
          header: { fontSize: 18, margin: [0, 0, 0, 10] },
          tableHeader: { bold: true, fontSize: 13, color: 'black' }
        }
      }

      const pdfDocGenerator = pdfMake.createPdf(docDefinition)
      pdfDocGenerator.getBlob((data) => {
        fileSaver.saveAs(data, '商品列表.pdf')
      })
    }
  }
}
</script>

具体实现过程如下：