携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

导出一般都是导出excel、word、pdf，同时还要支持自定义导出，预览，下面跟随小鹏一览众山小

导出Excel

使用a标签下载

利用a标签的使用href与download属性实现下载

href：是指这个超链接指向的url地址；
download：该属性是HTML5新增的属性，此属性是让我们的浏览器下载URL而不是跳转到URL所指向的内容，所以若我们需要下载文件到本地，需要设置这个属性值。

<a
  :href="文件地址"
  download="文件名.xls"
  class="download"
  >下载</a
>

封装导出函数

封装成倒出函数，原理与第一个相同


// 下载文件

export function downloadFile (obj, name, suffix) {

 const url = window.URL.createObjectURL(new Blob([obj]))

 const link = document.createElement('a')

 link.style.display = 'none'

 link.href = url

 const fileName = parseTime(new Date()) + '-' + name + '.' + suffix

 link.setAttribute('download', fileName)

 document.body.appendChild(link)

 link.click()

 document.body.removeChild(link)

}

api导出

调用后端接口，实现导出

export function download (url, params) {
  return request({
    url: url,
    method: 'post',
    responseType: 'blob',
    data: {
      body: { ...params }
    }
  })
}

responseType为blob，否则会出现乱码

导出函数

vue-element-admin 中已经帮我们封装好的导入导出组件，我们直接就可以使用，开心不

Excel 的导入导出都是依赖于js-xlsx来实现的。

在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据。

handleDownload() {
  this.downloadLoading = true
  import('@/vendor/Export2Excel').then(excel => {
    const tHeader = this.tHeader
    const filterVal = this.filterVal
    const list = this.list
    const data = this.formatJson(filterVal, list)
    excel.export_json_to_excel({
      header: tHeader,
      data,
      filename: this.filename,
      autoWidth: this.autoWidth,
      bookType: this.bookType
    })
    this.downloadLoading = false
  })
},
formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => {
    if (j === 'timestamp') {
      return parseTime(v[j])
    } else {
      return v[j]
    }
  }))
}

预览Pdf

使用vue-pdf插件进行文档预览，下载使用a标签方式导出，原理如上

npm i vue-pdf

import pdf from 'vue-pdf'

<pdf
  :src="文件路径"
  @error="pdfError($event)"
  style="max-height: 300px; overflow: scroll"
/>

pdfError (err) {
  console.log(err)
  this.$notify({
    title: 预览失败，请重试,
    type: 'error',
    duration: 2500
  })
}

手把手教你学vue - 16 - 导出 & 预览