1. import FilenameOption from './components/FilenameOption'
  2. import AutoWidthOption from './components/AutoWidthOption'
  3. import BookTypeOption from './components/BookTypeOption'
  4.  
  5. handleDownload() {
  6. this.downloadLoading = true
  7. import('@/vendor/Export2Excel').then(excel => {
  8. const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
  9. const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
  10. const list = this.list
  11. const data = this.formatJson(filterVal, list)
  12. excel.export_json_to_excel({
  13. header: tHeader,
  14. data,
  15. filename: this.filename,
  16. autoWidth: this.autoWidth,
  17. bookType: this.bookType
  18. })
  19. this.downloadLoading = false
  20. })
  21. },
  22. formatJson(filterVal, jsonData) {
  23. return jsonData.map(v => filterVal.map(j => {
  24. if (j === 'timestamp') {
  25. return parseTime(v[j])
  26. } else {
  27. return v[j]
  28. }
  29. }))
  30. }

Export2Excel

  1. /* eslint-disable */
  2. require('script-loader!file-saver');
  3. import XLSX from 'xlsx'
  4.  
  5. function generateArray(table) {
  6. var out = [];
  7. var rows = table.querySelectorAll('tr');
  8. var ranges = [];
  9. for (var R = ; R < rows.length; ++R) {
  10. var outRow = [];
  11. var row = rows[R];
  12. var columns = row.querySelectorAll('td');
  13. for (var C = ; C < columns.length; ++C) {
  14. var cell = columns[C];
  15. var colspan = cell.getAttribute('colspan');
  16. var rowspan = cell.getAttribute('rowspan');
  17. var cellValue = cell.innerText;
  18. if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
  19.  
  20. //Skip ranges
  21. ranges.forEach(function (range) {
  22. if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
  23. for (var i = ; i <= range.e.c - range.s.c; ++i) outRow.push(null);
  24. }
  25. });
  26.  
  27. //Handle Row Span
  28. if (rowspan || colspan) {
  29. rowspan = rowspan || ;
  30. colspan = colspan || ;
  31. ranges.push({
  32. s: {
  33. r: R,
  34. c: outRow.length
  35. },
  36. e: {
  37. r: R + rowspan - ,
  38. c: outRow.length + colspan -
  39. }
  40. });
  41. };
  42.  
  43. //Handle Value
  44. outRow.push(cellValue !== "" ? cellValue : null);
  45.  
  46. //Handle Colspan
  47. if (colspan)
  48. for (var k = ; k < colspan - ; ++k) outRow.push(null);
  49. }
  50. out.push(outRow);
  51. }
  52. return [out, ranges];
  53. };
  54.  
  55. function datenum(v, date1904) {
  56. if (date1904) v += ;
  57. var epoch = Date.parse(v);
  58. return (epoch - new Date(Date.UTC(, , ))) / ( * * * );
  59. }
  60.  
  61. function sheet_from_array_of_arrays(data, opts) {
  62. var ws = {};
  63. var range = {
  64. s: {
  65. c: ,
  66. r:
  67. },
  68. e: {
  69. c: ,
  70. r:
  71. }
  72. };
  73. for (var R = ; R != data.length; ++R) {
  74. for (var C = ; C != data[R].length; ++C) {
  75. if (range.s.r > R) range.s.r = R;
  76. if (range.s.c > C) range.s.c = C;
  77. if (range.e.r < R) range.e.r = R;
  78. if (range.e.c < C) range.e.c = C;
  79. var cell = {
  80. v: data[R][C]
  81. };
  82. if (cell.v == null) continue;
  83. var cell_ref = XLSX.utils.encode_cell({
  84. c: C,
  85. r: R
  86. });
  87.  
  88. if (typeof cell.v === 'number') cell.t = 'n';
  89. else if (typeof cell.v === 'boolean') cell.t = 'b';
  90. else if (cell.v instanceof Date) {
  91. cell.t = 'n';
  92. cell.z = XLSX.SSF._table[];
  93. cell.v = datenum(cell.v);
  94. } else cell.t = 's';
  95.  
  96. ws[cell_ref] = cell;
  97. }
  98. }
  99. if (range.s.c < ) ws['!ref'] = XLSX.utils.encode_range(range);
  100. return ws;
  101. }
  102.  
  103. function Workbook() {
  104. if (!(this instanceof Workbook)) return new Workbook();
  105. this.SheetNames = [];
  106. this.Sheets = {};
  107. }
  108.  
  109. function s2ab(s) {
  110. var buf = new ArrayBuffer(s.length);
  111. var view = new Uint8Array(buf);
  112. for (var i = ; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  113. return buf;
  114. }
  115.  
  116. export function export_table_to_excel(id) {
  117. var theTable = document.getElementById(id);
  118. var oo = generateArray(theTable);
  119. var ranges = oo[];
  120.  
  121. /* original data */
  122. var data = oo[];
  123. var ws_name = "SheetJS";
  124.  
  125. var wb = new Workbook(),
  126. ws = sheet_from_array_of_arrays(data);
  127.  
  128. /* add ranges to worksheet */
  129. // ws['!cols'] = ['apple', 'banan'];
  130. ws['!merges'] = ranges;
  131.  
  132. /* add worksheet to workbook */
  133. wb.SheetNames.push(ws_name);
  134. wb.Sheets[ws_name] = ws;
  135.  
  136. var wbout = XLSX.write(wb, {
  137. bookType: 'xlsx',
  138. bookSST: false,
  139. type: 'binary'
  140. });
  141.  
  142. saveAs(new Blob([s2ab(wbout)], {
  143. type: "application/octet-stream"
  144. }), "test.xlsx")
  145. }
  146.  
  147. export function export_json_to_excel({
  148. multiHeader = [],
  149. header,
  150. data,
  151. filename,
  152. merges = [],
  153. autoWidth = true,
  154. bookType= 'xlsx'
  155. } = {}) {
  156. /* original data */
  157. filename = filename || 'excel-list'
  158. data = [...data]
  159. data.unshift(header);
  160.  
  161. for (let i = multiHeader.length-; i > -; i--) {
  162. data.unshift(multiHeader[i])
  163. }
  164.  
  165. var ws_name = "SheetJS";
  166. var wb = new Workbook(),
  167. ws = sheet_from_array_of_arrays(data);
  168.  
  169. if (merges.length > ) {
  170. if (!ws['!merges']) ws['!merges'] = [];
  171. merges.forEach(item => {
  172. ws['!merges'].push(XLSX.utils.decode_range(item))
  173. })
  174. }
  175.  
  176. if (autoWidth) {
  177. /*设置worksheet每列的最大宽度*/
  178. const colWidth = data.map(row => row.map(val => {
  179. /*先判断是否为null/undefined*/
  180. if (val == null) {
  181. return {
  182. 'wch':
  183. };
  184. }
  185. /*再判断是否为中文*/
  186. else if (val.toString().charCodeAt() > ) {
  187. return {
  188. 'wch': val.toString().length *
  189. };
  190. } else {
  191. return {
  192. 'wch': val.toString().length
  193. };
  194. }
  195. }))
  196. /*以第一行为初始值*/
  197. let result = colWidth[];
  198. for (let i = ; i < colWidth.length; i++) {
  199. for (let j = ; j < colWidth[i].length; j++) {
  200. if (result[j]['wch'] < colWidth[i][j]['wch']) {
  201. result[j]['wch'] = colWidth[i][j]['wch'];
  202. }
  203. }
  204. }
  205. ws['!cols'] = result;
  206. }
  207.  
  208. /* add worksheet to workbook */
  209. wb.SheetNames.push(ws_name);
  210. wb.Sheets[ws_name] = ws;
  211.  
  212. var wbout = XLSX.write(wb, {
  213. bookType: bookType,
  214. bookSST: false,
  215. type: 'binary'
  216. });
  217. saveAs(new Blob([s2ab(wbout)], {
  218. type: "application/octet-stream"
  219. }), `${filename}.${bookType}`);
  220. }

https://github.com/PanJiaChen/vue-element-admin.git

VUE导入Excel的更多相关文章

  1. Vue 导入excel功能

    html: <input type="file" @change="importf(this)" accept=".csv, applicati ...

  2. Vue项目中导入excel文件读取成js数组

    1. 安装组件 cnpm install xlsx --save 2. 代码 <template> <span> <input class="input-fil ...

  3. vue项目导入excel单列导入

    先安装 xlsx.js, 然后引入 import XLSX from 'xlsx'; 代码 <form> <span> <textarea name="cont ...

  4. EasyPoi导入Excel

    EasyPoi的导出Excel功能和导入功能同样简单.我之前强调过,EasyPoi的原理本质就是Poi,正如MyBatis Plus的本质原理就是MyBatis. POI导入功能可以参考如下地址:ht ...

  5. Lumen5.5,使用laravel excel 下载 、导入excel文件

    1.安装 首先是安装laravel excel,使用composer安装 composer require maatwebsite/excel ~2.1.0 2.配置 在bootstrap/app.p ...

  6. vue实现Excel文件的上传与下载

    一.前言项目中使用到比较多的关于Excel的前端上传与下载,整理出来,以便后续使用或分析他人. 1.前端vue:模板下载与导入Excel 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件 ...

  7. 导入excel并进行数据提取

    /** * @description: 导入excel并进行数据提取 * @param {type} * @return: */ Vue.prototype.$importExcel = functi ...

  8. 一步步实现ABAP后台导入EXCEL到数据库【3】

    在一步步实现ABAP后台导入EXCEL到数据库[2]里,我们已经实现计划后台作业将数据导入数据库的功能.但是,这只是针对一个简单的自定义结构的导入程序.在实践应用中,面对不同的表.不同的导入文件,我们 ...

  9. 一步步实现ABAP后台导入EXCEL到数据库【1】

    在SAP的应用当中,导入.导出EXCEL文件的情况是一个常见的需求,有时候用户需要将大量数据定期导入到SAP的数据库中.这种情况下,使用导入程序在前台导入可能要花费不少的时间,如果能安排导入程序为后台 ...

随机推荐

  1. VLAN实验3:理解Hybrid接口的应用

    实验环境 实验拓扑图 实验编址 实验步骤1.基本配置按照实验编址为PC配置IP地址,以PC5为例 在PC5与PC1通过ping命令测试,发现通讯正常.(以此为例,其他的我就不一一截图测试了.) 在S1 ...

  2. zabbix Server 4.0 监控JMX监控详解

    zabbix Server 4.0 监控JMX监控详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.   大家都知道,zabbix server效率高是使用C语言编写的,有很多应用 ...

  3. 2019-ACM-CCPC-Online-Contest

    2019-ACM-CCPC-Online-Contest 1.^&^ 题意: ​ 求一个最小的正整数\(C\),使得\((A\oplus C) \&(B\oplus C)\)最小. 思 ...

  4. Vue当中的this

    10事件绑定 methods当中的this就是Vue实例对象vm var vm = new Vue({ el: '#app', data: { num: 0 }, // 注意点: 这里不要忘记加逗号 ...

  5. Oracle的Md5加密

    创建函数 CREATE OR REPLACE FUNCTION MD5( passwd IN VARCHAR2) RETURN VARCHAR2 IS retval ); BEGIN retval : ...

  6. 2019-2020-1 20199312《Linux内核原理与分析》第十二周作业

    实验背景 2014年9月24日,Bash中发现了一个严重漏洞shellshock,该漏洞可用于许多系统,并且既可以远程也可以在本地触发.在本实验中,学生需要亲手重现攻击来理解该漏洞,并回答一些问题. ...

  7. RCNN,Fast RCNN,Faster RCNN 的前生今世:(2)R-CNN

    Region CNN(RCNN)可以说是利用深度学习进行目标检测的开山之作.作者Ross Girshick多次在PASCAL VOC的目标检测竞赛中折桂,2010年更带领团队获得终身成就奖,如今供职于 ...

  8. 域渗透:IPC$ 命名管道

    介绍:IPC$(Internet Process Connection) 是共享 " 命名管道 " 的资源,它是为了让进程间通信而开放的命名管道,通过提供可信任的用户名和口令,连接 ...

  9. Flume组件

    1.什么是Flume:apache顶级项目,主要用来做数据采集.分布式.高可用,将海量日志进行采集.聚合.传输的系统.能够对数据进行简单处理在发送到接收方. 2.Flume组件:source.chan ...

  10. Win32 Error

    一.Win32错误 也就是Win32子系统产生的错误.当我们在自己的代码里调用Windows系统的API函数,系统执行API内部代码,当API内部代码出现错误,会将预先定义好的错误代码写到调用这个AP ...