Vue无后端配合实现导出功能的示例代码

 更新时间:2024年01月31日 09:52:37   作者:会说法语的猪  
这篇文章主要为大家详细介绍了Vue如何在无后端配合的情况下实现导出功能,文中的示例代码简洁易懂,有需要的小伙伴可以跟随小编一起了解一下

正常导出是后端来做,我们去调用后端接口,会返回给我们文件(前端即:axios请求,设置responseType: 'blob',然后创建一个a标签,通过window.URL.createObjectURL将blob转为一个路径,为a标签增加download属性,给其一个文件名称,执行click事件即可下载);但是没有后端的情况下怎么做呢?下面来简单介绍一下:

首先安装两个插件 

npm i file-saver -S
npm i xlsx -S

封装一下 

method.js 

import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
 
// 导出Excel(根据表格当前的数据进行导出)
export function exportExcel1(dom, fileName) {
  // 前面这五行代码作用就是去掉导出重复的表 就是导出的时候我这边会导出两个一样的表格,可能是因为右侧的fixed导致的,所以在导出的时候要删除掉
  let tableDom = dom.cloneNode(true)
  let elTableFixedRight = tableDom.querySelector(".el-table__fixed-right")
  let elTableFixed = tableDom.querySelector(".el-table__fixed")
  if(elTableFixedRight) tableDom.removeChild(elTableFixedRight);
  if(elTableFixed) tableDom.removeChild(elTableFixed);
 
  let wb = XLSX.utils.table_to_book(tableDom, { raw: true })
  let wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  })
  try {
    FileSaver.saveAs( new Blob([wbout], { type: "application/octet-stream" }), fileName);
  } catch(e) {
    console.error(e, wbout, '----->>>')
  }
}
 
// 导出Excel (根据数据 自定义导出  一般表格会分页展示数据,如果按照上面的方式 只会导出当前页的,如果想导出所有数据 就使用该方法)
export function exportExcel(tableList, fileName) {
  let tableData = [['故障报警', '设备名称', '故障内容', '系统', '状态', '开始时间', '结束时间']]
  tableList.forEach(item => {
    tableData.push([ item.alarm, item.equipname, item.point, item.system, item.status, item.starttime, item.endtime ])
  })
  let ws = XLSX.utils.aoa_to_sheet(tableData)
  let wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws)
  let wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  })
  try {
    FileSaver.saveAs( new Blob([wbout], { type: "application/octet-stream" }), fileName);
  } catch(e) {
    console.error(e, wbout, '----->>>')
  }
}
 
// 暂时没用下面这两个方法(也是可以的)
// 将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载
export function sheet2blob(dom, sheetName) {
  // 前面五行代码作用就是去掉导出重复的表 就是导出的时候我这边会导出两个一样的表格,可能是因为右侧的fixed导致的,所以在导出的时候要删除掉
  let tableDom = dom.cloneNode(true)
  let elTableFixedRight = tableDom.querySelector(".el-table__fixed-right")
  let elTableFixed = tableDom.querySelector(".el-table__fixed")
  if(elTableFixedRight) tableDom.removeChild(elTableFixedRight);
  if(elTableFixed) tableDom.removeChild(elTableFixed);
  const sheet = XLSX.utils.table_to_sheet(tableDom);//将一个table对象转换成一个sheet对象
  sheetName = sheetName || 'sheet1';
  var workbook = {
      SheetNames: [sheetName],
      Sheets: {}
  };
  workbook.Sheets[sheetName] = sheet; // 生成excel的配置项
 
  var wopts = {
      bookType: 'xlsx', // 要生成的文件类型
      bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
      type: 'binary'
  };
  var wbout = XLSX.write(workbook, wopts);
  var blob = new Blob([s2ab(wbout)], {
      type: "application/octet-stream"
  }); // 字符串转ArrayBuffer
  function s2ab(s) {
      var buf = new ArrayBuffer(s.length);
      var view = new Uint8Array(buf);
      for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
      return buf;
  }
  return blob;
}
export function openDownloadDialog(url, saveName) {
  if (typeof url == 'object' && url instanceof Blob) {
      url = URL.createObjectURL(url); // 创建blob地址
  }
  var aLink = document.createElement('a');
  aLink.href = url;
  aLink.download = saveName || ''; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
  var event;
  if (window.MouseEvent) event = new MouseEvent('click');
  else {
      event = document.createEvent('MouseEvents');
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  }
  aLink.dispatchEvent(event);
}

组件中使用(按需引入) 

<el-button icon="el-icon-download" @click="downloadTpl()" size="small">导出</el-button>
 
<el-table
  id="myTable"
  :data="dataList"
  size="medium"
  border
  @selection-change="selectionChangeHandle"
  v-loading="loading"
  class="table"
>
  <!-- ... -->
</el-table>

import { exportExcel, sheet2blob, openDownloadDialog } from './method'
export default {
  methods: {
    // 导出
    exportExcel() {
      exportExcel(document.getElementById('myTable'), '故障及报警.xlsx')
      //这个只需要 XLSX 库 应该也是可以的,我这边暂时没用
      // openDownloadDialog(sheet2blob(document.getElementById('myTable')), '故障及警.xlsx')
    }
  }
}

以上就是Vue无后端配合实现导出功能的示例代码的详细内容,更多关于Vue导出功能的资料请关注脚本之家其它相关文章!

相关文章

  • 详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别

    详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别

    这篇文章主要介绍了详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue element-ui读取pdf文件的方法

    vue element-ui读取pdf文件的方法

    这篇文章主要介绍了vue element-ui读取pdf文件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • Vue实现快捷键录入功能的示例代码

    Vue实现快捷键录入功能的示例代码

    有的时候项目需要在页面使用快捷键,而且需要对快捷键进行维护。本文将为大家展示Vue实现快捷键录入功能的示例代码,感兴趣的可以了解一下
    2022-04-04
  • vue之debounce属性被移除及处理详解

    vue之debounce属性被移除及处理详解

    今天小编就为大家分享一篇vue之debounce属性被移除及处理详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue实现移动端适方案的完整步骤

    vue实现移动端适方案的完整步骤

    现在的手机五花八门,造就了移动端窗口分辨率繁多的局面,在不同分辨率的屏幕下保持与UI图一致的效果,就成了让前端不得不头疼的问题,下面这篇文章主要给大家介绍了vue实现移动端适方案的相关资料,需要的朋友可以参考下
    2022-10-10
  • Vue axios 中提交表单数据(含上传文件)

    Vue axios 中提交表单数据(含上传文件)

    本篇文章主要介绍了Vue axios 中提交表单数据(含上传文件),具有一定的参考价值,有兴趣的可以了解一下
    2017-07-07
  • Vue3中的模板语法和vue指令

    Vue3中的模板语法和vue指令

    这篇文章主要介绍了Vue3中的模板语法和vue指令,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • Vue通过Blob对象实现导出Excel功能示例代码

    Vue通过Blob对象实现导出Excel功能示例代码

    这篇文章主要介绍了Vue通过Blob对象实现导出Excel功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • vue下拉列表的两种实现方式比较

    vue下拉列表的两种实现方式比较

    这篇文章主要介绍了vue下拉列表的两种实现方式比较,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-06-06
  • 详解Vue中的render: h => h(App)示例代码

    详解Vue中的render: h => h(App)示例代码

    这篇文章主要介绍了Vue中的render: h => h(App),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09

最新评论