有人知道，vue怎么导出excel表格么

Posted 2023-05-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了有人知道，vue怎么导出excel表格么相关的知识，希望对你有一定的参考价值。

参考技术A 参考代码：
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
var fromCharCode = String.fromCharCode;
var INVALID_CHARACTER_ERR = (function ()
"use strict";
// fabricate a suitable error object
try
document.createElement('$');
catch (error)
return error;

());

// encoder
if (!window.btoa)
window.btoa = function (string)
"use strict";
var a, b, b1, b2, b3, b4, c, i = 0, len = string.length, max = Math.max, result = '';

while (i < len)
a = string.charCodeAt(i++) || 0;
b = string.charCodeAt(i++) || 0;
c = string.charCodeAt(i++) || 0;

if (max(a, b, c) > 0xFF)
throw INVALID_CHARACTER_ERR;

b1 = (a >> 2) & 0x3F;
b2 = ((a & 0x3) << 4) | ((b >> 4) & 0xF);
b3 = ((b & 0xF) << 2) | ((c >> 6) & 0x3);
b4 = c & 0x3F;

if (!b)
b3 = b4 = 64;
else if (!c)
b4 = 64;

result += characters.charAt(b1) + characters.charAt(b2) + characters.charAt(b3) + characters.charAt(b4);

return result;
;

// decoder
if (!window.atob)
window.atob = function(string)
"use strict";
string = string.replace(new RegExp("=+$"), '');
var a, b, b1, b2, b3, b4, c, i = 0, len = string.length, chars = [];

if (len % 4 === 1)
throw INVALID_CHARACTER_ERR;

while (i < len)
b1 = characters.indexOf(string.charAt(i++));
b2 = characters.indexOf(string.charAt(i++));
b3 = characters.indexOf(string.charAt(i++));
b4 = characters.indexOf(string.charAt(i++));

a = ((b1 & 0x3F) << 2) | ((b2 >> 4) & 0x3);
b = ((b2 & 0xF) << 4) | ((b3 >> 2) & 0xF);
c = ((b3 & 0x3) << 6) | (b4 & 0x3F);

chars.push(fromCharCode(a));
b && chars.push(fromCharCode(b));
c && chars.push(fromCharCode(c));

return chars.join('');
;

ExcellentExport = (function()
"use strict";
var version = "1.3";
var csvSeparator = ',';
var uri = excel: 'data:application/vnd.ms-excel;base64,', csv: 'data:application/csv;base64,';
var template = excel: '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><table>table</table></body></html>';
var csvDelimiter = ",";
var csvNewLine = "\r\n";
var base64 = function(s)
return window.btoa(window.unescape(encodeURIComponent(s)));
;
var format = function(s, c)
return s.replace(new RegExp("(\\w+)", "g"), function(m, p)
return c[p];
);
;

var get = function(element)
if (!element.nodeType)
return document.getElementById(element);

return element;
;

var fixCSVField = function(value)
var fixedValue = value;
var addQuotes = (value.indexOf(csvDelimiter) !== -1) || (value.indexOf('\r') !== -1) || (value.indexOf('\n') !== -1);
var replaceDoubleQuotes = (value.indexOf('"') !== -1);

if (replaceDoubleQuotes)
fixedValue = fixedValue.replace(/"/g, '""');

if (addQuotes || replaceDoubleQuotes)
fixedValue = '"' + fixedValue + '"';

return fixedValue;
;

var tableToCSV = function(table)
var data = "";
var i, j, row, col;
for (i = 0; i < table.rows.length; i++)
row = table.rows[i];
for (j = 0; j < row.cells.length; j++)
col = row.cells[j];
data = data + (j ? csvDelimiter : '') + fixCSVField(col.textContent.trim());

data = data + csvNewLine;

return data;
;

var ee =
/** @expose */
excel: function(anchor, table, name)
table = get(table);
var ctx = worksheet: name || 'Worksheet', table: table.innerHTML;
var hrefvalue = uri.excel + base64(format(template.excel, ctx));
anchor.href = hrefvalue;
// Return true to allow the link to work
return true;
,
/** @expose */
csv: function(anchor, table, delimiter, newLine)
if (delimiter !== undefined && delimiter)
csvDelimiter = delimiter;

if (newLine !== undefined && newLine)
csvNewLine = newLine;

table = get(table);
var csvData = tableToCSV(table);
var hrefvalue = uri.csv + base64(csvData);
anchor.href = hrefvalue;
return true;

;

return ee;
());

vue将查询出来的表格数据导出为excel表格

参考技术A 一、需要安装三个依赖：

<div class="jb51code" >="" <pre="" npm="" install="" -s="" file-saver="" xlsx="" -d="" script-loader=""

二、项目中新建一个文件夹：（vendor---名字任取）

里面放置两个文件Blob.js和 Export2Excel.js。
Blob.js和 Export2Excel.js文件下载地址：<a target="_blank" href="http://xiazai.jb51.cc/201708/yuanma/Export2Exce_jb51.rar" >export2exce_jb51.rar
<a target="_blank" href="http://xiazai.jb51.cc/201708/yuanma/Export2Exce_jb51.rar" >export2exce_jb51.rar

<a target="_blank" href="http://xiazai.jb51.cc/201708/yuanma/Export2Exce_jb51.rar" >export2exce_jb51.rar三、在.vue文件中

写这两个方法：其中list是表格的内容
<div class="jb51code" >="" 　　　　　　　　const export_json_to_excel = require('../../vendor/Export2Excel'); 　　　　　　　　const tHeader = ['序号','IMSI','MSISDN','证件号码','姓名']; 　　　　　　　　const filterVal = ['ID','imsi','msisdn','address','name']; 　　　　　　　　const list = this.tableData; 　　　　　　　　const data = this.formatJson(filterVal,list); 　　　　　　　　export_json_to_excel(tHeader,data,'列表excel'); 　　　　　　) 　　　　,　　　　formatJson(filterVal,jsonData) 　　　　　　return jsonData.map(v => filterVal.map(j => v[j])) 　　　　

四、按钮导出调用export2Excel方法

注：如果webpack报解析错误：
在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname,'../src/vendor'),
即可解决
另：alias是配置别名　

以上是关于有人知道，vue怎么导出excel表格么的主要内容，如果未能解决你的问题，请参考以下文章

Vue 纯前端导出Excel

13.记录Vue项目导出excel出现的问题