思路:
1.H5使用html2Canvas和jsPDF把生成的excel文件通过上传接口上传到服务器,并获取地址
2.手机端原生提供一个方法,然后调用原生方法,H5给原生一个线上url地址,原生方法使用自带的浏览器打开这个url地址,从而访问并自动下载这个文件
实现:
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.把正常导出pdf的最后一行,PDF.save()方法删掉,换成下面的内容
var _this=this
//转成base64
let pdf64 = PDF.output("datauristring");
//base64转成blob文件
let path = _this.createDownloadFile("报表", pdf64);
//上传到服务器
let formdata = new FormData();
//第三个参数传一个不一定会用到的文件名,但是得有。注意后缀
formdata.append("file", path, "报表.pdf");
//调上传接口,这里因为我封装了axios增加了拦截器,所以是下面的写法,这里根据各位的上传方法不同,自行修改
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;
//调用安卓或者ios提供的方法,打开浏览器
Android.openBrowser(path);
});
3.在移动端点击导出时,会调用接口获取线上地址,然后弹出移动端的选择浏览器,打开浏览器以后会弹出下载提示。