本文目录一览：
- 1、有人知道，vue怎么导出excel表格么
- 2、vue项目中如何把表格导出excel表格
- 3、vue将查询出来的表格数据导出为excel表格
- 4、前端下载Excel时 URL.createObjectURL报错问题
有人知道，vue怎么导出excel表格么
参考代码：
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=""headmeta http-equiv="Content-Type" content="text/html; charset=UTF-8"!--[if gte mso 9]xmlx:ExcelWorkbookx:ExcelWorksheetsx:ExcelWorksheetx:Name{worksheet}/x:Namex:WorksheetOptionsx:DisplayGridlines//x:WorksheetOptions/x:ExcelWorksheet/x:ExcelWorksheets/x:ExcelWorkbook/xml![endif]--/headbodytable{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表格
有一个项目需求，要求在前端项目中导出Excel表格，经过查找代码,Vue.js确实可以实现，具体实现步骤为：
1. 安装依赖
//npm npm install -S file-saver xlsx
npm install -D script-loader
或者
//yarnyarn add file-saver
yarn add xlsx
yarn add script-loader --dev
2.导入两个JS
下载Blob.js和Export2Excel.js，在src目录下新建Excel文件夹，里面放入Blob.js和Export2Excel.js两个JS文件
image
**3.在main.js引入这两个JS文件 **
import Blob from './excel/Blob'import Export2Excel from './excel/Export2Excel.js'
4.在组件中使用
//导出的方法exportExcel() {
require.ensure([], () = {
const { export_json_to_excel } = require('../excel/Export2Excel');
const tHeader = ['序号', '昵称', '姓名'];
// 上面设置Excel的表格第一行的标题
const filterVal = ['index', 'nickName', 'name'];
// 上面的index、nickName、name是tableData里对象的属性
const list = this.tableData; //把data里的tableData存到list
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]))
}
tHeader是表头，filterVal 中的数据是表格的字段，tableData中存放表格里的数据，类型为数组，里面存放对象，表格的每一行为一个对象。
tableData 中的值为：
data () {
return {
tableData: [
{'index':'0',"nickName": "沙滩搁浅我们的旧时光", "name": "小明"},
{'index':'1',"nickName": "女人天生高贵", "name": "小红"},
{'index':'2',"nickName": "海是彩色的灰尘", "name": "小兰"}
]
}
}
最后实现的效果图：
image
如果运行时，报如下所示的错误：
image
这是因为Export2Excel.js的设置需要改下：
image
注： 把require('script-loader!vendor/Blob')改为 require('./Blob.js')
demo 地址：
vue将查询出来的表格数据导出为excel表格
一、需要安装三个依赖：
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="" export2exce_jb51.rar
a target="_blank" href="" export2exce_jb51.rar
a target="_blank" href="" 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是配置别名
前端下载Excel时 URL.createObjectURL报错问题
首先前端用的是vue环境,用axios独立封装的一个接口,请求接口开始是这样的
前端请求后,获取到数据
然后浏览器会报一个错误 Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
查阅资料后得知 当 URL.createObjectURL(data) 这个data不是 blob类型就会报错
只要在axios请求接口中加一个参数 responseType: 'blob' 就能解决 导出报错问题