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本地文件导出内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue前端导出Excel文件的详细实现方案

    目录 一.技术选型 二.技术实现 使用 vue-json-excel 插件实现 1.安装 vue-json-excel 依赖 2.注册插件到 vue 实例 3.使用方式 基于 sheetJS-xlsx 解析器的 xlsx-style 实现(推荐) 1.安装依赖 2.使用方法 三.参考资料 总结 一.技术选型 1.使用 vue-json-excel 插件实现 优点:简单便捷,易上手,开箱即用: 缺点:不支持 excel 表格样式设置,且支持功能比较单一: 2.基于 sheetJS-xlsx 解析器

  • vue-以文件流-blob-的形式-下载-导出文件操作

    vue项目中,经常遇到文件导出与下载,有时候是直接返回服务端的文件url,这样直接以a链接下载,或者windown.open对不同类型的文件进行下载或预览.但如果返回的是文件流,则需要做一些其他处理,具体形式如下: 1.首先要确定服务器返回的数据类型. 在请求头中加入: config.responseType = 'blob' 有时候,不是所有接口都需要该类型,则可以对接口做一个判定: // request拦截器 service.interceptors.request.use( config

  • vue 导出文件,携带请求头token操作

    前言 本文并不能直接复制到本地看效果,仅提供代码参考 1.使用axios的方式携带请求头token 2.设置响应的数据类型 responseType: "blob" 3.请求成功,返回二进制文件的数据回来 4.请求失败,返回json 5.示例代码 <template> <div> <el-button type="primary" size="small" :loading="btnLoading"

  • 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组件

  • Easypoi 轻松实现复杂excel文件导出功能

    之前做的excel文件导出都相对简单,用的都是公司自己封装的一些poi方法,导出内容都是表头+一行行的数据,但是这次需要导出的excel复杂度高了不少,自己用现有方法做比较麻烦,因此引入了Easypoi 进行实现. 之所以用Easypoi我是看中了它可以直接根据现有模板填充数据实现excel生成,而模板产品已经给出,那么接下来只需要稍微做修改就能使用,修改后的模板如图: 对照着官方文档的示例(http://easypoi.mydoc.io/ ) 很容易就能理解模板的使用规则 注意其中的{{$fe

  • Python实现的本地文件搜索功能示例【测试可用】

    本文实例讲述了Python实现的本地文件搜索功能.分享给大家供大家参考,具体如下: 偶尔需要搜索指定文件,不想每次都在windows下面去搜索,想用代码来实现搜索,而且能够收集搜索结果,于是有了下面的代码. # -*- coding:utf-8 -*- #! python2 import os def search_file(fileNmae, path): '''search a file in target directory :param fileNmae: file to be sear

  • SpringBoot快速集成jxls-poi(自定义模板,支持本地文件导出,在线文件导出)

    在项目持续集成的过程中,有时候需要实现报表导出和文档导出,类似于excel中这种文档的导出,在要求不高的情况下,有人可能会考虑直接导出csv文件来简化导出过程.但是导出xlsx文件,其实过程相对更复杂.解决方案就是使用poi的jar包.使用源生的poi来操作表格,代码冗余,处理复杂,同时poi的相关联的依赖还会存在版本兼容问题.所以直接使用poi来实现表格导出,维护成本大,不易于拓展. 我们需要学会站在巨人的肩膀上解决问题,jxls-poi这个就很好解决这个excel表格导出的多样化的问题.类似

  • vue + element-ui实现简洁的导入导出功能

    前言 众所周知,ElementUI,是一个比较完善的UI库,但是使用它需要有一点vue的基础.在开始本文的正文之前,我们先来看看安装的方法吧. 安装ElementUI模块 cnpm install element-ui -S 在main.js中引入 import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' 全局安装 Vue.use(ElementUI) 当我们安装完记得重新运行,cnpm

  • vue如何实现二进制流文件导出excel

    目录 vue二进制流文件导出excel 前端代码 后端node 关于二进制文件流导出Excel文件的一些坑 实现下载效果 踩坑 vue二进制流文件导出excel 问了一下其他的后端,他们公司前端是a标签,后端是给了一个地址,a标签或者window.open()都可以实现. 我们公司是后端返回的二进制流文件,实现了一下,亲测可以,没有问题 前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta cha

  • Vue项目如何获取本地文件夹绝对路径

    目录 一.前端代码 1.弹框样式代码 2.导入方法(不要忘记了导入方法和data定义) 3.方法区代码 4.api接口中的config.js代码 二.后端代码 controller层代码 service接口interface service层代码impl 总结 Vue项目,实现获取本地的绝对文件夹路径的解决方案 一.前端代码 vue项目下的index中代码如下 1.弹框样式代码 <el-dialog title="" :append-to-body="true"

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

    vue实现word或pdf文档导出的功能,我的项目是:后端返回一个文档流(下图),然后前端对文档流做处理进行下载,代码如下: import axios from 'axios'; axios.get(`url`, { //url: 接口地址 responseType: `arraybuffer` //一定要写 }) .then(res => { if(res.status == 200){ let blob = new Blob([res.data], { type: `application/

  • vue中如何下载文件导出保存到本地

    目录 vue下载文件导出保存到本地 另一种情况 vue中a标签下载本地文件-未找到,原因及解决 错误代码 原因 解决 vue下载文件导出保存到本地 先分析如何下载:先有一个链接地址,然后使用 location.href或window.open()下载到本地 看看返回数据 res.config.url 中是下载链接地址,res.data 中是返回的二进制数据 如何下载 ... <el-button icon="el-icon-download" @click="downl

  • 基于Vue实现Excel解析与导出功能详解

    目录 前言 基本介绍 代码实现 基本结构 上传解析 Excel的导出 基本结构 导出Excel 总结 前言 最近在整理日常开发中长涉及到的业务需求,正好想到了excel的解析与上传方面的事情,在开发中还是比较常见的,趁着周末做一下整理学习吧 基本介绍 主要基于Vue+element实现文件的解析与导出,用的的插件是 xlsx,里面的具体方法,感兴趣的去研究一下,基本的样式,配置就不赘述了,也比较简单,我们直接上主食 代码实现 基本结构 用户点击文件上传,将excel的表格已json的格式显示在页

随机推荐