VUE导入Excel
- import FilenameOption from './components/FilenameOption'
- import AutoWidthOption from './components/AutoWidthOption'
- import BookTypeOption from './components/BookTypeOption'
- handleDownload() {
- this.downloadLoading = true
- import('@/vendor/Export2Excel').then(excel => {
- const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
- const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
- 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]
- }
- }))
- }
Export2Excel
- /* eslint-disable */
- require('script-loader!file-saver');
- import XLSX from 'xlsx'
- function generateArray(table) {
- var out = [];
- var rows = table.querySelectorAll('tr');
- var ranges = [];
- for (var R = ; R < rows.length; ++R) {
- var outRow = [];
- var row = rows[R];
- var columns = row.querySelectorAll('td');
- for (var C = ; C < columns.length; ++C) {
- var cell = columns[C];
- var colspan = cell.getAttribute('colspan');
- var rowspan = cell.getAttribute('rowspan');
- var cellValue = cell.innerText;
- if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
- //Skip ranges
- ranges.forEach(function (range) {
- if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
- for (var i = ; i <= range.e.c - range.s.c; ++i) outRow.push(null);
- }
- });
- //Handle Row Span
- if (rowspan || colspan) {
- rowspan = rowspan || ;
- colspan = colspan || ;
- ranges.push({
- s: {
- r: R,
- c: outRow.length
- },
- e: {
- r: R + rowspan - ,
- c: outRow.length + colspan -
- }
- });
- };
- //Handle Value
- outRow.push(cellValue !== "" ? cellValue : null);
- //Handle Colspan
- if (colspan)
- for (var k = ; k < colspan - ; ++k) outRow.push(null);
- }
- out.push(outRow);
- }
- return [out, ranges];
- };
- function datenum(v, date1904) {
- if (date1904) v += ;
- var epoch = Date.parse(v);
- return (epoch - new Date(Date.UTC(, , ))) / ( * * * );
- }
- function sheet_from_array_of_arrays(data, opts) {
- var ws = {};
- var range = {
- s: {
- c: ,
- r:
- },
- e: {
- c: ,
- r:
- }
- };
- for (var R = ; R != data.length; ++R) {
- for (var C = ; 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;
- var cell = {
- v: data[R][C]
- };
- if (cell.v == null) continue;
- var cell_ref = 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[];
- cell.v = datenum(cell.v);
- } else cell.t = 's';
- ws[cell_ref] = cell;
- }
- }
- if (range.s.c < ) ws['!ref'] = XLSX.utils.encode_range(range);
- return ws;
- }
- function Workbook() {
- if (!(this instanceof Workbook)) return new Workbook();
- this.SheetNames = [];
- this.Sheets = {};
- }
- function s2ab(s) {
- var buf = new ArrayBuffer(s.length);
- var view = new Uint8Array(buf);
- for (var i = ; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
- return buf;
- }
- export function export_table_to_excel(id) {
- var theTable = document.getElementById(id);
- var oo = generateArray(theTable);
- var ranges = oo[];
- /* original data */
- var data = oo[];
- var ws_name = "SheetJS";
- var wb = new Workbook(),
- ws = sheet_from_array_of_arrays(data);
- /* add ranges to worksheet */
- // ws['!cols'] = ['apple', 'banan'];
- ws['!merges'] = ranges;
- /* add worksheet to workbook */
- wb.SheetNames.push(ws_name);
- wb.Sheets[ws_name] = ws;
- var wbout = XLSX.write(wb, {
- bookType: 'xlsx',
- bookSST: false,
- type: 'binary'
- });
- saveAs(new Blob([s2ab(wbout)], {
- type: "application/octet-stream"
- }), "test.xlsx")
- }
- export function export_json_to_excel({
- multiHeader = [],
- header,
- data,
- filename,
- merges = [],
- autoWidth = true,
- bookType= 'xlsx'
- } = {}) {
- /* original data */
- filename = filename || 'excel-list'
- data = [...data]
- data.unshift(header);
- for (let i = multiHeader.length-; i > -; i--) {
- data.unshift(multiHeader[i])
- }
- var ws_name = "SheetJS";
- var wb = new Workbook(),
- ws = sheet_from_array_of_arrays(data);
- if (merges.length > ) {
- if (!ws['!merges']) ws['!merges'] = [];
- merges.forEach(item => {
- ws['!merges'].push(XLSX.utils.decode_range(item))
- })
- }
- if (autoWidth) {
- /*设置worksheet每列的最大宽度*/
- const colWidth = data.map(row => row.map(val => {
- /*先判断是否为null/undefined*/
- if (val == null) {
- return {
- 'wch':
- };
- }
- /*再判断是否为中文*/
- else if (val.toString().charCodeAt() > ) {
- return {
- 'wch': val.toString().length *
- };
- } else {
- return {
- 'wch': val.toString().length
- };
- }
- }))
- /*以第一行为初始值*/
- let result = colWidth[];
- for (let i = ; i < colWidth.length; i++) {
- for (let j = ; j < colWidth[i].length; j++) {
- if (result[j]['wch'] < colWidth[i][j]['wch']) {
- result[j]['wch'] = colWidth[i][j]['wch'];
- }
- }
- }
- ws['!cols'] = result;
- }
- /* add worksheet to workbook */
- wb.SheetNames.push(ws_name);
- wb.Sheets[ws_name] = ws;
- var wbout = XLSX.write(wb, {
- bookType: bookType,
- bookSST: false,
- type: 'binary'
- });
- saveAs(new Blob([s2ab(wbout)], {
- type: "application/octet-stream"
- }), `${filename}.${bookType}`);
- }
https://github.com/PanJiaChen/vue-element-admin.git
VUE导入Excel的更多相关文章
- Vue 导入excel功能
html: <input type="file" @change="importf(this)" accept=".csv, applicati ...
- Vue项目中导入excel文件读取成js数组
1. 安装组件 cnpm install xlsx --save 2. 代码 <template> <span> <input class="input-fil ...
- vue项目导入excel单列导入
先安装 xlsx.js, 然后引入 import XLSX from 'xlsx'; 代码 <form> <span> <textarea name="cont ...
- EasyPoi导入Excel
EasyPoi的导出Excel功能和导入功能同样简单.我之前强调过,EasyPoi的原理本质就是Poi,正如MyBatis Plus的本质原理就是MyBatis. POI导入功能可以参考如下地址:ht ...
- Lumen5.5,使用laravel excel 下载 、导入excel文件
1.安装 首先是安装laravel excel,使用composer安装 composer require maatwebsite/excel ~2.1.0 2.配置 在bootstrap/app.p ...
- vue实现Excel文件的上传与下载
一.前言项目中使用到比较多的关于Excel的前端上传与下载,整理出来,以便后续使用或分析他人. 1.前端vue:模板下载与导入Excel 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件 ...
- 导入excel并进行数据提取
/** * @description: 导入excel并进行数据提取 * @param {type} * @return: */ Vue.prototype.$importExcel = functi ...
- 一步步实现ABAP后台导入EXCEL到数据库【3】
在一步步实现ABAP后台导入EXCEL到数据库[2]里,我们已经实现计划后台作业将数据导入数据库的功能.但是,这只是针对一个简单的自定义结构的导入程序.在实践应用中,面对不同的表.不同的导入文件,我们 ...
- 一步步实现ABAP后台导入EXCEL到数据库【1】
在SAP的应用当中,导入.导出EXCEL文件的情况是一个常见的需求,有时候用户需要将大量数据定期导入到SAP的数据库中.这种情况下,使用导入程序在前台导入可能要花费不少的时间,如果能安排导入程序为后台 ...
随机推荐
- VLAN实验3:理解Hybrid接口的应用
实验环境 实验拓扑图 实验编址 实验步骤1.基本配置按照实验编址为PC配置IP地址,以PC5为例 在PC5与PC1通过ping命令测试,发现通讯正常.(以此为例,其他的我就不一一截图测试了.) 在S1 ...
- zabbix Server 4.0 监控JMX监控详解
zabbix Server 4.0 监控JMX监控详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 大家都知道,zabbix server效率高是使用C语言编写的,有很多应用 ...
- 2019-ACM-CCPC-Online-Contest
2019-ACM-CCPC-Online-Contest 1.^&^ 题意: 求一个最小的正整数\(C\),使得\((A\oplus C) \&(B\oplus C)\)最小. 思 ...
- Vue当中的this
10事件绑定 methods当中的this就是Vue实例对象vm var vm = new Vue({ el: '#app', data: { num: 0 }, // 注意点: 这里不要忘记加逗号 ...
- Oracle的Md5加密
创建函数 CREATE OR REPLACE FUNCTION MD5( passwd IN VARCHAR2) RETURN VARCHAR2 IS retval ); BEGIN retval : ...
- 2019-2020-1 20199312《Linux内核原理与分析》第十二周作业
实验背景 2014年9月24日,Bash中发现了一个严重漏洞shellshock,该漏洞可用于许多系统,并且既可以远程也可以在本地触发.在本实验中,学生需要亲手重现攻击来理解该漏洞,并回答一些问题. ...
- RCNN,Fast RCNN,Faster RCNN 的前生今世:(2)R-CNN
Region CNN(RCNN)可以说是利用深度学习进行目标检测的开山之作.作者Ross Girshick多次在PASCAL VOC的目标检测竞赛中折桂,2010年更带领团队获得终身成就奖,如今供职于 ...
- 域渗透:IPC$ 命名管道
介绍:IPC$(Internet Process Connection) 是共享 " 命名管道 " 的资源,它是为了让进程间通信而开放的命名管道,通过提供可信任的用户名和口令,连接 ...
- Flume组件
1.什么是Flume:apache顶级项目,主要用来做数据采集.分布式.高可用,将海量日志进行采集.聚合.传输的系统.能够对数据进行简单处理在发送到接收方. 2.Flume组件:source.chan ...
- Win32 Error
一.Win32错误 也就是Win32子系统产生的错误.当我们在自己的代码里调用Windows系统的API函数,系统执行API内部代码,当API内部代码出现错误,会将预先定义好的错误代码写到调用这个AP ...