vue混合开发模式下的原生（移动端）导出前端生成的excel

思路：

1.H5把生成的excel文件通过上传接口上传到服务器，并获取地址
2.手机端原生提供一个方法，然后调用原生方法，H5给原生一个线上url地址，原生方法使用自带的浏览器打开这个url地址，从而访问并自动下载这个文件

实现：

步骤基本上就是普通的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中的引用地址根据文件位置调整

require('script-loader!file-saver');
require('script-loader!./Blob');
require('script-loader!xlsx/dist/xlsx.core.min');

4.修改Export2Excel.js中的export_json_to_excel方法，或者根据这个方法新写一个方法放在底下
4.1.该方法的底部是调用了一个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.在页面上的调用的打印方法主体部分

exportOut() {
    var _this = this;
     require.ensure([], () => {
        const {
          export_json_to_excel,
        } = require("你的Export2Excel.js文件路径"); 
        const tHeader = [
          "...",
          "你的表头名",
        ]; // 导出的表头名
        const filterVal = ["...", "你的表头字段名"]; // 导出的表头字段名
        let number = 0,
          newArrayList = [];
        const lists = newArrayList;
        _this.list.map((item, index) => {
          newArrayList.push({
           //处理你要打印的数据，塞进去。_this.list是你页面上展示的数据的数组
          });
        });
        const data = _this.formatJson(filterVal, lists);
        //注意，从这里开始就和普通的pc导出有区别
        let excelfile = export_json_to_excel(
          tHeader,
          data,
          `excel文件名，自己起的`
        );
        let formdata = new FormData();
        formdata.append("file", excelfile, "表格.xlsx");
        //注意要给第三个参数传一个文件名，名字随便起，因为后台有上传文件的命名规范，所以一般情况下是用不到你起的文件名
        //但是不传的话接口大概会报错，因为blob的格式下是需要一个文件名的。
       //调用后台上传接口，这里因为我封装了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;
        //这里是拼接线上文件地址
        //然后调用原生方法打开浏览器，安卓或者ios的
          Android.openBrowser(path2);
        });
      });
}

formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
},

5.在移动端点击导出时，会调用接口获取线上地址，然后弹出移动端的选择浏览器，打开浏览器以后会弹出下载提示。

最后编辑于：2021.04.23 10:47:11