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

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

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

????文件在线预览

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

preview(row){
    // row=""
    var myHref = ('a')
     = 
     = "_blank"
    ()
}

????文件下载功能

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

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

      let that = this;
       = function () {
        if ( == 200) {
          //接受二进制文件流
          var blob = ;
          (blob, fileName);
        }
      };
      ();
    },
    downloadExportFile(blob, tagFileName) {
      let downloadElement = ("a");
      let href = blob;
      if (typeof blob == "string") {
         = "_blank";
      } else {
        href = (blob); //创建下载的链接
      }
       = href;
      //下载后文件名
       = tagFileName;
      (); //点击下载
      if () {
        (downloadElement); //下载完成移除元素
      }
      if (typeof blob != "string") {
        (href); //释放掉blob对象
      }
    },

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

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