uniapp h5页面做文本流的下载-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp h5页面做文本流的下载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

重点：不要用框架封装的uni.request，直接使用没游封装的uni.request()进行请求数据

  /**
     * 下载---文件
     * 文件流下载
     * */
    downloadFapiao(fphm) {
      //这里是请求路径和参数的拼接（完整请求url）config.baseUrl是API的基本路径
      let url = config.baseUrl + "/ynpstWechatOrder/download-invoice";
      let data = { fphm: fphm }; //参数
      uni.showLoading({
        title: "下载中",
        duration: 2000,
      });
      uni.request({
        //uniapp的请求
        url: url,
        responseType: "arraybuffer", //这里记得设置响应数据格式，不然预览的pdf是空白
        data: data,
        method: "post", //请求方式
        header: {
          "content-type": "application/json",
        },
        success: (response) => {
          if (!response) {
            uni.showToast({
              title: "下载失败",
              duration: 2000,
            });
          }
          let pdfData = response.data; //pdfData是后端返回的文件流
          //创建blob数据流，并用a标签来下载
          let blob = new Blob([pdfData], {
            type: "application/pdf;charset=UTF-8",
          });
          var a = document.createElement("a");
          document.body.appendChild(a);
          a.style = "display: none";
          var url = window.URL.createObjectURL(blob);
          a.href = url;
          a.download = `发票${fphm}.pdf`;
          a.click();
          a.remove();
          window.URL.revokeObjectURL(url);
          uni.hideLoading(); //关闭loading
          uni.showToast({
            title: "下载成功",
            duration: 2000,
          });
        },
        ail: (err) => {
          console.log(err);
        },
      });
    },