项目中常用到的前端vue根据后端接口返回文件地址实现在线预览和下载功能

简简单单的记录一下项目中做过的东西

项目中时常会有要求查看附件，附件的下载的要求，在这里简单记录一下前端vue根据后端接口返回文件地址实现在线预览和下载功能。

?文件在线预览

目前我这里使用的是点击a链接跳转页面的做法，这个方法适用于gif，png，jpeg，jpg，mp4，pdf，mp3格式文件的在线预览，对于excel，word，zip，pptx他会自动下载到本地，可以下载后查看，主要功能代码如下：

preview(row){
    // row="https://xxxxxxx.pdf"
    var myHref = document.createElement('a')
    myHref.href = row.href
    myHref.target = "_blank"
    myHref.click()
}

?文件下载功能

这里记录的文件下载也是直接后端返回文件地址，然后下载，这个方法目前我自己测试能够支持有gif，png，jpeg，jpg，mp4，pdf，mp3，excel，word，zip，pptx，txt，mov文件格式。主要功能代码如下：

 /**
     * @description: 下载
     * @return {*}
     */
    handleDownload(row) {
      let url = this.baseUrl + row.fileUrl;
      this.fileLinkToStreamDownload(url, row);
    },
    fileLinkToStreamDownload(url, row) {
      let fileName = row.fileName;
      let xhr = new XMLHttpRequest();
      xhr.open("get", url, true);
      xhr.setRequestHeader(
        "Content-Type",
        `application/pdf`,
        `application/msword`,
        `image/png`,
        `image/jpeg`,
        `image/gif`,
        `text/plain`,
        `application/octet-stream`,
        `text/xml`
      );
      xhr.responseType = "blob";

      let that = this;
      xhr.onload = function () {
        if (this.status == 200) {
          //接受二进制文件流
          var blob = this.response;
          that.downloadExportFile(blob, fileName);
        }
      };
      xhr.send();
    },
    downloadExportFile(blob, tagFileName) {
      let downloadElement = document.createElement("a");
      let href = blob;
      if (typeof blob == "string") {
        downloadElement.target = "_blank";
      } else {
        href = window.URL.createObjectURL(blob); //创建下载的链接
      }
      downloadElement.href = href;
      //下载后文件名
      downloadElement.download = tagFileName;
      downloadElement.click(); //点击下载
      if (document.body.downloadElement) {
        document.body.removeChild(downloadElement); //下载完成移除元素
      }
      if (typeof blob != "string") {
        window.URL.revokeObjectURL(href); //释放掉blob对象
      }
    },

上面这个文件下载还有可能能够支持其他格式，这个就需要大家自己一个一个去测试了。

简单记录一下，以防下次找不到！