前端下载图片、文件（js）

范同学~

已于 2023-09-08 17:55:34 修改

阅读量226

点赞数

文章标签：前端 javascript html

于 2023-04-26 13:11:27 首次发布

本文链接：https://blog.csdn.net/weixin_46041322/article/details/130383805

版权

文章介绍了两种前端下载方法：一种是利用Image和Canvas处理图片并转换为base64下载；另一种是通过axios以Blob类型请求文件并触发下载。同时，文中提到了处理参数的方法和下载后的资源释放。

摘要由CSDN通过智能技术生成

1.下载图片

    downImg(e) {
      //e 为图片的url
      var image = new Image()
      // 解决跨域canvas污染问题
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function() {
        let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
        let a = document.createElement('a')
        a.download = 'download'
        a.href = url
        a.click()
      }
      image.src = e
      return Promise.resolve()
    },

2.下载文件

    buttonEvent(e) {
      let params = this.getQuery();//参数
      axios
        .post(接口, params, {
          responseType: "blob" // 指定响应类型为 Blob
        })
        .then(msg => {
          console.log(msg.data); //打印出来是blob对象，已经不是乱码了
          let url = window.URL.createObjectURL(msg.data); //表示一个指定的file对象或Blob对象
          let a = document.createElement("a");
          document.body.appendChild(a);
          a.href = url;
          a.download = "工单列表.xls"; //命名下载名称
          a.click(); //点击触发下载
          window.URL.revokeObjectURL(url); //下载完成进行释放
        });
    },
//处理参数
    getQuery() {
      let formInline = this.formInline;
      return {
        startTime: this.time ? this.time[0] : "",
        finishTime: this.time ? this.time[1] : "",
        faultName: formInline.faultName,
        faultItem: formInline.faultName ? formInline.faultItem : "",
        areas: formInline.cities,
        buildIds: formInline.buildIds,
        orderNo: formInline.orderNo,
        orderStatusItem: formInline.orderStatus
          ? formInline.orderStatusItem
          : "",
        columnName: formInline.columnName,
        orderType: formInline.orderType,
        orderSource: formInline.orderSource,
        sort: formInline.sort,
        page: formInline.page,
        size: formInline.size
      };
    },