思路:
1.H5把生成的excel文件通過上傳接口上傳到服務(wù)器界酒,并獲取地址
2.手機(jī)端原生提供一個方法圣拄,然后調(diào)用原生方法,H5給原生一個線上url地址毁欣,原生方法使用自帶的瀏覽器打開這個url地址庇谆,從而訪問并自動下載這個文件
實(shí)現(xiàn):
步驟基本上就是普通的vue使用Export2Excel生成excel,只是要修改下Export2Excel.js中的export_json_to_excel方法
vue使用Export2Excel生成excel可以參考這篇文章
(https://blog.csdn.net/weixin_40043172/article/details/87969774)
1.下載Export2Excel.js和Blob.js
2.安裝依賴
npm install -S file-saver
npm install -S xlsx
npm install -D script-loader
3.Export2Excel.js中的引用地址根據(jù)文件位置調(diào)整
require('script-loader!file-saver');
require('script-loader!./Blob');
require('script-loader!xlsx/dist/xlsx.core.min');
4.修改Export2Excel.js中的export_json_to_excel方法凭疮,或者根據(jù)這個方法新寫一個方法放在底下
4.1.該方法的底部是調(diào)用了一個saveAs方法饭耳,如下
saveAs(new Blob([s2ab(wbout)], {
type: "application/octet-stream;charset=utf-8"
}), title + ".xlsx")
把這里修改一下,直接返回一個blob文件
let file = new Blob([s2ab(wbout)], { type: "application/octet-stream;charset=utf-8" })
return file
4.2.在頁面上的調(diào)用的打印方法主體部分
exportOut() {
var _this = this;
require.ensure([], () => {
const {
export_json_to_excel,
} = require("你的Export2Excel.js文件路徑");
const tHeader = [
"...",
"你的表頭名",
]; // 導(dǎo)出的表頭名
const filterVal = ["...", "你的表頭字段名"]; // 導(dǎo)出的表頭字段名
let number = 0,
newArrayList = [];
const lists = newArrayList;
_this.list.map((item, index) => {
newArrayList.push({
//處理你要打印的數(shù)據(jù)执解,塞進(jìn)去寞肖。_this.list是你頁面上展示的數(shù)據(jù)的數(shù)組
});
});
const data = _this.formatJson(filterVal, lists);
//注意,從這里開始就和普通的pc導(dǎo)出有區(qū)別
let excelfile = export_json_to_excel(
tHeader,
data,
`excel文件名材鹦,自己起的`
);
let formdata = new FormData();
formdata.append("file", excelfile, "表格.xlsx");
//注意要給第三個參數(shù)傳一個文件名逝淹,名字隨便起,因?yàn)楹笈_有上傳文件的命名規(guī)范桶唐,所以一般情況下是用不到你起的文件名
//但是不傳的話接口大概會報錯栅葡,因?yàn)閎lob的格式下是需要一個文件名的。
//調(diào)用后臺上傳接口尤泽,這里因?yàn)槲曳庋b了axios增加了攔截器欣簇,所以是下面的寫法,
request({
url: _this.url + _this.curVersion + "/SysFile/uploadImg",
method: "post",
data: formdata,
}).then((res) => {
let path2 =
_this.url + res.data.data.filePath + res.data.data.fileName;
//這里是拼接線上文件地址
//然后調(diào)用原生方法打開瀏覽器坯约,安卓或者ios的
Android.openBrowser(path2);
});
});
}
formatJson(filterVal, jsonData) {
return jsonData.map((v) => filterVal.map((j) => v[j]));
},
5.在移動端點(diǎn)擊導(dǎo)出時熊咽,會調(diào)用接口獲取線上地址,然后彈出移動端的選擇瀏覽器闹丐,打開瀏覽器以后會彈出下載提示横殴。