vue使用file-saver本地文件导出功能

1:安装xlsx和file-saver

npm install file-saver xlsx  –save

2:创建localexports.js文件

3：直接上代码

import xlsx from 'xlsx';
const filesaver = require('file-saver');
import { getrandomnum } from '@/utils';
// 本地导出表格
/**
 * 导出excel文件
 * @param {*} elementname   table组件id名称
 * @param {*} filename      文件名
 * @description             使用说明
 *                          import { exportsxlsx } from '@/utils/localexports';
 *                          exportsxlsx('idname', '文件名称');
 */
 
export function exportsxlsx(elementname, filename) {
  const time = new date().gettime();
  const random = getrandomnum(100, 1000);
  const wb = xlsx.utils.table_to_book(clearhead(elementname), { raw: true });
  const wbout = xlsx.write(wb, { booktype: 'xlsx', booksst: true, type: 'array' });
  filesaver.saveas(new blob([wbout], { type: 'application/octet-stream' }), `${filename}${time}-${random}.xlsx`);
}
function clearhead(elementname) {
  const tabledom = document.queryselector('#' + elementname).clonenode(true);
  const tableheader = tabledom.queryselector('.el-table__header-wrapper');
  const tablebody = tabledom.queryselector('.el-table__body');
  tableheader.childnodes[0].append(tablebody.childnodes[1]);
  const headerdom = tableheader.childnodes[0].queryselectorall('th');
 
  // 移除左侧checkbox的节点
  if (headerdom[0].queryselectorall('.el-checkbox')) {
    headerdom[0].remove();
  }
  for (const key in headerdom) {
    if (headerdom[key].innertext === '操作') {
      headerdom[key].remove();
    }
  }
  // 清理掉checkbox 和操作的button
  const tablelist = tableheader.childnodes[0].childnodes[2].queryselectorall('td');
  for (let key = 0; key < tablelist.length; key++) {
    if (tablelist[key].queryselectorall('.el-checkbox').length > 0 || tablelist[key].queryselectorall('.el-button').length > 0) {
      tablelist[key].remove();
    }
  }
  return tableheader;
}
 

4：使用方式

<el-table
          id="good"
          v-loading="listloading"
          :header-cell-style="{ background: '#fafafa', color: '#212532' }"
          :data="list"
          tooltip-effect="dark"
          style="width: 100%"
          height="566"
          border
          @selection-change="handleselectionchange"
        >
 
import { exportsxlsx } from '@/utils/localexports';
methods:{
  onsearch() {
      exportsxlsx('good', '模拟数据');
    
    },
}

5:good为table组件的id，getramdomnum方法如下

// 生成随机数
export function getrandomnum(min, max) {
  var range = max - min;
  var rand = math.random();
  return (min + math.round(rand * range));
}

到此这篇关于vue使用file-saver本地文件导出的文章就介绍到这了,更多相关vue file-saver本地文件导出内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！