思路:
1.H5使用html2Canvas和jsPDF把生成的excel文件通過上傳接口上傳到服務(wù)器粘茄,并獲取地址
2.手機端原生提供一個方法秕脓,然后調(diào)用原生方法瘪菌,H5給原生一個線上url地址嘹朗,原生方法使用自帶的瀏覽器打開這個url地址诵肛,從而訪問并自動下載這個文件
實現(xiàn):
1.總之先把下面兩個方法放進methods里
dataURLtoFile(dataurl, filename) {
// 生成Blob
var arr = dataurl.split(",");
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
createDownloadFile(fileName, file) {
const blob = this.dataURLtoFile(`${file}`, fileName);
blob.lastModifiedDate = new Date();
blob.name = fileName;
return blob;
},
2.把正常導(dǎo)出pdf的最后一行怔檩,PDF.save()方法刪掉,換成下面的內(nèi)容
var _this=this
//轉(zhuǎn)成base64
let pdf64 = PDF.output("datauristring");
//base64轉(zhuǎn)成blob文件
let path = _this.createDownloadFile("報表", pdf64);
//上傳到服務(wù)器
let formdata = new FormData();
//第三個參數(shù)傳一個不一定會用到的文件名媒吗,但是得有乙埃。注意后綴
formdata.append("file", path, "報表.pdf");
//調(diào)上傳接口,這里因為我封裝了axios增加了攔截器甫何,所以是下面的寫法遇伞,這里根據(jù)各位的上傳方法不同,自行修改
request({
url: _this.url + _this.curVersion + "/SysFile/uploadImg",
method: "post",
data: formdata,
}).then((res) => {
//拼接文件線上地址
let path =
_this.url + res.data.data.filePath + res.data.data.fileName;
//調(diào)用安卓或者ios提供的方法巍耗,打開瀏覽器
Android.openBrowser(path);
});
3.在移動端點擊導(dǎo)出時渐排,會調(diào)用接口獲取線上地址,然后彈出移動端的選擇瀏覽器娄琉,打開瀏覽器以后會彈出下載提示吓歇。