精华内容
下载资源
问答
  • Vue+element 前端导出Excel功能工具包,很好用!!!! Export2Excel.js、Blob.js实现将数据导出为表格的形式
  • 前端导出excel

    2015-12-21 10:54:45
    前端导出Excel,不用在后台处理,通过要导出的信息在界面显示,既可以通过js导出Excel。很实用
  • 前端表格导出Excel

    2018-02-05 17:40:36
    前端表格数据导出excel表格,导出的数据为表格显示数据,付代码,类
  • js前端导出table到excel

    2019-03-07 16:11:59
    这是一个前端通过js导出页面的table生成并下载excel的demo
  • 一个导出excel的demo,包含导出的逻辑代码和依赖包,下载以后请执行 npm install ,然后起服务访问,不能直接以 file://打开哦
  • js前端导出Excel的方法

    2020-11-27 04:13:57
    要是网上找的前端导出,既然是前端导出又是报表就需要有数据,所以数据都需要你提前做好相应填充 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>...
  • 前端导出excel表格, 前端导出下载文件, 用new Blob()导出文件, 前端导出文件乱码解决

    导出文件的过程

    前端发请求, 后端处理后返回文件流, 前端通过Blob解析并下载

    实现过程:

    前端发请求

    需要将响应类型更改为 arraybufferblob
    不设置响应类型会导致下载的文件看起来乱码
    解决前端导出文件乱码(设置响应类型)
    responseType: 'arraybuffer'responseType: 'blob'
    以常用的请求库axios为例(有可能你的项目对 axios 进行了二次封装, 你需要找到 options 来配置 )

    get请求写法

    axios.get(url, {
      params: form,
      responseType: 'arraybuffer'
      // responseType: 'blob'
    })
    

    post请求写法

    axios.post(url, params, {
      responseType: 'arraybuffer'
      // responseType: 'blob'
    })
    

    后端处理返回文件流

    在这里插入图片描述

    前端通过Blob对象解析并下载

    文件名和文件类型建议用后端返回的数据, 一般会放在响应头

    在这里插入图片描述
    文件名和类型的信息存放在 content-dispositioncontent-type

    文件名为中文的时候, 后端一般会转码前端可以使用decodeURIComponent解码
    解析并下载
    按照上图返回的结构, 以axios为例处理, res为请求成功后后端返回数据的参数
    let filename = decodeURIComponent(
    	res.headers['content-disposition'].split(';')[1].split('=')[1]
    )
    // let filename = '导出表格.xlsx' // 可以, 但不建议直接写文件名
    let fileType = decodeURIComponent(res.headers['content-type'])
    let blob = new Blob([res.data], {
        type: fileType
        // type: 'application/vnd.ms-excel' // 特殊情况下直接写文件的MIME类型
    })
    let url = window.URL.createObjectURL(blob)
    // 创建一个临时的url指向blob对象
    // 创建url之后可以模拟对此文件对象的一系列操作,例如:预览、下载
    let a = document.createElement('a')
    a.href = url
    a.download = filename
    // 下载
    a.click()
    // 释放这个临时的对象url
    window.URL.revokeObjectURL(url)
    

    注意

    1. filename 可以直接赋值一个字符串包含文件后缀名, 例如: ('导出表格.xlsx'), 但建议从响应头取
    2. new Blob() 的第一个参数为一个数据序列,可以是任意格式的值,例如,任意数量的字符串,Blobs 以及 ArrayBuffers , 不一定是 [res.data] , 也可能是 [res.body] 或其它, 具体根据后端的返回来写
    3. new Blob() 的第二个参数用于指定将要放入 Blob 中的数据的类型 (MIME) , 大多数情况从响应头取, 但是后端返回 ( content-type: application/octet-stream 是默认的未知的类型, 除非你知道具体是什么类型,否则解析不出来 ) 的时候需要自己手动设置 MIME 类型。 例如: Excel 表需设置成 { type: 'application/vnd.ms-excel' }

    多种文件类型的MIME类型参考点击此处

    展开全文
  • 3.根据后端数据导出excel,后端数据如: 4.导出函数 handleExportCurrentExcel = (ExcelData) => { //ExcelData为后端返回的data数组 let sheetFilter = ["ticketNo", "ticketAmount", "tic

    1.下载安装

    npm install js-export-excel
    

    2.引入

    import ExportJsonExcel from "js-export-excel";
    

    3.根据后端数据导出excel,后端数据如:
    在这里插入图片描述

    4.导出函数

    
     handleExportCurrentExcel = (ExcelData) => { //ExcelData为后端返回的data数组
                let sheetFilter = ["ticketNo", "ticketAmount", "ticketDate", "ticketExpireDate", "ticketStatusCd","drawerName","drawerAccountNo", "drawerBank", "payeeName", "payeeAccountNo", "payeeBank","acceptorName", "acceptorAccountNo","acceptorBank"];
                let option = {};
                option.fileName = '商票发行管理';
                option.datas = [
                    {
                        sheetData: ExcelData,
                        sheetName: '商票发行管理',
                        sheetFilter: sheetFilter,
                        sheetHeader: ['票据号码', '票据金额(元)', '出票日期', '汇票到期日期', '票据状态','出票人名称','出票账号', '出票开户行', '收款人名称', '收款账号', '收款开户行','承兑人名称', '承兑人账号','承兑人开户行'],
                        columnWidths: [10,10,10,10,10,10,10,10,10,10,10,10,10,10]
                    },
                ];
        
                var toExcel = new ExportJsonExcel(option); //new
                toExcel.saveExcel(); //保存
            }
    

    5.导出结果
    在这里插入图片描述
    在这里插入图片描述

    注:此导出为一个sheet,也可为多个sheet,实现形式如下:

      //导出账单excel
         handleExportCurrentExcel = (ExcelData) => { //ExcelData为后端返回的data数组
                let sheetFilter = ["ticketNo", "ticketAmount", "ticketDate", "ticketExpireDate", "ticketStatusCd","drawerName","drawerAccountNo", "drawerBank", "payeeName", "payeeAccountNo", "payeeBank","acceptorName", "acceptorAccountNo","acceptorBank"];
                let option = {};
                option.fileName = '商票发行管理';
                option.datas = [
                    {
                        sheetData: ExcelData,
                        sheetName: '商票发行管理',
                        sheetFilter: sheetFilter,
                        sheetHeader: ['票据号码', '票据金额(元)', '出票日期', '汇票到期日期', '票据状态','出票人名称','出票账号', '出票开户行', '收款人名称', '收款账号', '收款开户行','承兑人名称', '承兑人账号','承兑人开户行'],
                        columnWidths: [10,10,10,10,10,10,10,10,10,10,10,10,10,10]
                    },
                     {
                        sheetData: ExcelData,
                        sheetName: '商票发行管理2',
                        sheetFilter: sheetFilter,
                        sheetHeader: ['票据号码', '票据金额(元)', '出票日期', '汇票到期日期', '票据状态','出票人名称','出票账号', '出票开户行', '收款人名称', '收款账号', '收款开户行','承兑人名称', '承兑人账号','承兑人开户行'],
                        columnWidths: [10,10,10,10,10,10,10,10,10,10,10,10,10,10]
                    },
                ];
        
                var toExcel = new ExportJsonExcel(option); //new
                toExcel.saveExcel(); //保存
            }
    

    在这里插入图片描述

    展开全文
  • 之前写过一篇关于纯前端导出excel的文章 但是之前用的那个依赖不兼容ie 现在重新发表一个兼容ie的; 1.安装依赖npm install xlsx 2引用公共方法 ,方法已经封装,直接禁用即可, 公共方法 /** * 纯前端导出Excel...

    之前写过一篇关于纯前端导出excel的文章 但是之前用的那个依赖不兼容ie 现在重新发表一个兼容ie的;

    1.安装依赖  npm install xlsx

    2引用公共方法 ,方法已经封装,直接禁用即可,

    公共方法

    /**
     * 纯前端导出Excel工具
     */
    import * as XLSX from "xlsx";
    import {saveAs} from '@progress/kendo-file-saver';
    
    export function formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
    }
    
    function s2ab(s) {
        let buf = new ArrayBuffer(s.length)
        let view = new Uint8Array(buf)
        for (let i = 0; i !== s.length; ++i) {
            view[i] = s.charCodeAt(i) & 0xFF
        }
        return buf
    }
    
    function data2ws(data) {
        const ws = {}
        const range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}}
        for (let R = 0; R !== data.length; ++R) {
            for (let C = 0; C !== data[R].length; ++C) {
                if (range.s.r > R) range.s.r = R
                if (range.s.c > C) range.s.c = C
                if (range.e.r < R) range.e.r = R
                if (range.e.c < C) range.e.c = C
                const cell = {v: data[R][C]}
                if (cell.v == null) continue
                const cellRef = XLSX.utils.encode_cell({c: C, r: R})
                if (typeof cell.v === 'number') cell.t = 'n'
                else if (typeof cell.v === 'boolean') cell.t = 'b'
                else if (cell.v instanceof Date) {
                    cell.t = 'n'
                    cell.z = XLSX.SSF._table[14]
                } else {
                    cell.t = 's'
                }
                ws[cellRef] = cell
            }
        }
        if (range.s.c < 10000000) {
            ws['!ref'] = XLSX.utils.encode_range(range)
        }
        return ws
    }
    
    function Workbook() {
        if (!(this instanceof Workbook)) {
            return new Workbook()
        }
        this.SheetNames = []
        this.Sheets = {}
    }
    
    /*
    * th => 表头
    * data => 数据
    * fileName => 文件名
    * fileType => 文件类型
    * sheetName => sheet页名
    */
    
    //导出封装好的方法
    export function toExcel({th, data, fileName, fileType, sheetName}) {
        data.unshift(th)
        const wb = new Workbook()
        const ws = data2ws(data)
        sheetName = sheetName || 'sheet1'
        wb.SheetNames.push(sheetName)
        wb.Sheets[sheetName] = ws
        fileType = fileType || 'xlsx'
        var wbout = XLSX.write(wb, {bookType: fileType, bookSST: false, type: 'binary'})
        fileName = fileName || '列表'
        saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}), `${fileName}.${fileType}`)
    }
    

    如何引用:

     downloadData = () => {
            let {chooseData, searchValue} = this.state;
            if(chooseData.length === 0) {
                message.warning('无数据可导出');
                return;
            }
            const th = ["行号", "物料代码", "物料描述", "计量单位", "价格单位", "合同可用余额", "采购申请号", "含税单价", "行数量", "行未下单数量", "订单数量", "合同创建人", "销售人员", "计价方式", "采购申请行号", "WBS", ];
            const filterVal = ["contractLineNumNew", "materialCode", "materialRemark", "measureUnitName", "priceUnit", "availabMoney", "purchaseApplyNumber", "purchasePriceInclusive", "amount", "unorderCount", "orderCount", "creatorName", "employeeName", "valMethodName", "purchaseApplyLineNumber", "wbsNo", ];
            const data = formatJson(filterVal, chooseData);
            toExcel({th, data, fileName: `${searchValue.contractCode} 合同数据`, fileType: "xlsx", sheetName: `${searchValue.contractCode} 合同数据`})
        };

    这里面chooseData就是table的数据,各位仿照这个使用即可

    展开全文
  • 前端导出excel文件

    千次阅读 2019-05-28 13:45:41
    用到xlsx和file-saver库,xslx用以转换数据对象Blob对象中,file-saver用以在客户端保存文件。 import { saveAs } from 'file-saver' import XLSX from 'xlsx' export const exportXlsx = (data, fields, ...

    用到xlsxfile-saver库,xslx用以转换数据对象到Blob对象中,file-saver用以在客户端保存文件。

    import { saveAs } from 'file-saver'
    import XLSX from 'xlsx'
    
    export const exportXlsx = (data, fields, fileName = 'excel') => {
        // book_new创建一个workbook对象,主要用到两个属性:SheetNames和Sheets
        // SheetNames包含该excel文件的所有工作表名称
        // Sheets包含每个工作表名称和workSheet的映射关系
        const workBook = XLSX.utils.book_new()
        workBook.SheetNames.push(fileName)
    
        // json_to_sheet将数据数组转化为一个workSheet对象
        const workSheet = XLSX.utils.json_to_sheet(
            data, 
            { 
                header: fields
            }
        )
        workBook.Sheets[fileName] = workSheet
    
        // 输出xlsx文件
        const wopts = { bookType: 'xlsx', bookSST: false, type: 'array' }
        const wbout = XLSX.write(workBook, wopts)
        saveAs(new Blob([ wbout ],{ type: 'application/octet-stream' } ), fileName + '.xlsx')
    }
    

    也可以不借助file-saver库保存.xlsx文件:

    const blob = new Blob([wbout], {
        type: 'application/octet-stream'
    })
    
    const a = window.document.createElement('a')
    a.href = window.URL.createObjectURL(blob, {
        type: 'data:attachment/xlsx'
    })
    a.download = 'yourFileName.xlsx'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    

    测试exportXlsx函数:

    const data = [
     	{
            A1: '1',
            A2: '2'
        }
    ]
    const fields = ['A1', 'A2']
    exportXlsx(
        data,
        fields
    )
    
    展开全文
  • SheetJS是用于多种电子表格格式的解析器和编写器。通过官方规范、相关文档以及测试文件实现简洁的JS方法。SheetJS强调解析和编写的稳健,其跨格式的特点和统一的JS规范兼容,并且ES3/ES5浏览器向后兼容IE6
  • 优点:支持格式众多,支持 excel 表格样式设置,功能强大,可控性高,可读取和导出excel; 缺点:使用较为复杂,上手成本较大,且高级功能需要收费,但该功能可以借助 xlsx-style 实现; 二、技术实现 使用 vue-json...
  • vue前端导出Excel.zip

    2021-05-22 17:09:11
    vue前端导出Excel.zip
  • 前端导出excel,所见即所得,可以设置不导出列,可以设置不导出列,可以设置不导出列,简单方便,注释详细
  • 前端导出excel和图片

    千次阅读 2019-07-02 14:50:58
    介绍Blob 一直以来,JS都没有比较好的可以直接处理二进制的方法。而Blob的存在,允许我们可以通过JS直接操作二进制数据。 一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是...
  • 工作之余整理的,可用于实现在前端页面导出table表格中的数据到excel,支持生成json、excel等格式。
  • 1.js-export-excel \t可以使数字不用使用科学计数法,数字会自动向右对齐,字符串向左对齐,sheetName不能有特殊字符 import ExportJsonExcel from 'js-export-excel'; downloadExcel(data){ let option = {}; let...
  • vue实现前端导出excel

    2020-07-01 16:44:04
    一、安装依赖 $ `npm install -S xlsx` $ `npm install -S file-saver` ...src下创建excel(自定义)文件夹放入Blob.js 和 export2Excel.js 链接:https://pan.baidu.com/s/1Hp66lcrl8nYJUTSUyXY5hA 提取码:w1fz
  • 安装依赖 ...下载所需的两个文件:Blob.js、Export2Excel.js https://download.csdn.net/download/badao_liumang_qizhi/10767801 新建vendor,名称不一定非是vendor,建议但不非得将此目录放在与单...
  • 前端导出excel表格

    2020-09-08 13:44:48
    接收数据之后下载导出excel文件 步骤: 添加模块 // npm npm install --save file-saver xlsx npm install --save script-loader 新建文件夹,创建两个文件,如图:(两个在文件文末链接) 引入文件 ...
  • 前端导出Excel)JS、HTML导出Excel

    千次阅读 2018-07-13 12:18:02
    1、方式一:使用window.location.href(这种方式需要后台处理Excel)步骤1、&...导出Excel&lt;/button&gt;步骤2、function exportExcel(){ window.location.href = window.location.host + '/exportExcel';...
  • 前端导出excel表格

    2020-07-31 16:59:22
    原文参考
  • 前端导出excel表格的插件

    千次阅读 2019-04-04 22:58:42
    目前找到的几种用来导出Excel的插件就是这些,其余的还有一个需要jQuery2.0以上的版本,或者是不更新了的,就不在这里了 ExcellentExport.js–Table to Excel 后面半句是我加的,它主要就是个抓取table标签,然后...
  • 之前也看过导出订单项目,但是一直没有实现过,最近刚好有需求要做这个功能! 也去网上看了一些博客,参考了2个比较详细的,最后实现了效果 第一步:安装依赖(三个步骤缺一不可) npm install file-saver --...
  • //下载模板 window.location.href = uri + base64(template) } //输出base64编码 function base64(s) { return window.btoa(unescape(encodeURIComponent(s))) } //优点:导出Excel表可以像前端画table表一样方便...
  • vue+element-ui 前端导出excel表格功能

    千次阅读 2020-06-16 00:59:16
    在src目录下新建excel文件夹,里面放入Blob.js和Export2Excel.js两个JS文件 下载Blob.js和Export2Excel.js 提取码: 6p7x 3、main.js 引入文件 import Blob from './excel/Blob' import Export2Excel from './excel/...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,681
精华内容 12,272
关键字:

前端导出excel