要求通过地址获取文件流 但是我这边需要在header中带token  所以 直接访问window.open(url)地址报没有权限

所以通过访问接口地址返回文件流通过流文件创建文件对象展示在新的窗口。

      handlePreview (file) {
        const _this = this
        _this.$http({
          url: _this.$http.adornUrl('file/' + file.url),
          method: 'get',
          responseType: 'blob',
        }).then(({ data }) => {
          window.open(window.URL.createObjectURL(data), '_blank')
        })
      },

 

背景：碰到了在当前页面预览pdf(不打开新的窗口，采用iframe)，并下载。
一、pdf的预览
1.在适合位置嵌入iframe标签
2.在methods中添加相应方法
pdfPreview(val) {
this.previewDownFile(val).then(v => {
if (v.status == 200) {
const binaryData = [];
binaryData.push(v.data);
let url = window.URL.createObjectURL(new Blob(binaryData, {type: 'application/pdf'}));
this.pdfUrl = url
} else {
this.$message.error("请求错误！");
}
})
},
previewDownFile(val) {
return new Promise((resolve, reject) => {
this.$axios({
url: `file-server/download/annex/${val.value}`,
timeout: 0,
method: 'get',
responseType: 'blob',
header: {"Content-Type": "multipart/form-data"},
}).then(res => {
resolve(res)
}).catch(() => {
resolve(false);
});
});
},
二、pdf的下载
pdfUpdate() {
this.previewDown().then(v => {
if (v.status == 200) {
if (!v) {
return;
} else {
const elink = document.createElement("a");
// console.log(new Blob([v.data]));
elink.href = window.URL.createObjectURL(new Blob([v.data], {type: `application/pdf`}));
elink.style.display = 'none';
elink.setAttribute('download', this.tabData.dataCateName);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
}
}
})
},
previewDown() {
return new Promise((resolve, reject) => {
this.$axios({
url: `file-server/download/${this.emitData.fileId}`,
timeout: 0,
method: 'get',
responseType: 'blob',
header: {"Content-Type": "multipart/form-data"},
}).then(res => {
resolve(res)
}).catch(() => {
resolve(false);
});
});
},
总结：其实但看代码还是蛮简单的。但是实际操作的时候，还是费了一番功夫。

在javaweb中写了一个图片的链接，可以打开预览，另外提供一个下载功能。
以下是预览代码，没什么好说的；href若连接的是一个压缩包文件之类无法直接打开的就可以直接下载；
预览
关键在于如何在页面上下载这个张图片，于是写了下面的一个jsp用流来读取文件；
下载
pageEncoding="utf-8"%>
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
String classPath = (String.valueOf(Thread.currentThread().getContextClassLoader().getResource(""))).replaceAll("file:/", "").replaceAll("%20", " ").trim();
%>
//得到文件名字和路径
String filepath = request.getParameter("path");
String filename = request.getParameter("pdfName");
//设置响应头和下载保存的文件名
response.setContentType("APPLICATION/OCTET-STREAM");
response.setHeader("Content-Disposition", "attachment;  filename=\""  +  filename  +  "\"");
//打开指定文件的流信息
OutputStream outputStream = response.getOutputStream();
InputStream inputStream = new FileInputStream(filepath+filename);
byte[] buffer = new byte[1024];
int i = -1;
while ((i = inputStream.read(buffer)) != -1) {
outputStream.write(buffer, 0, i);
}
outputStream.flush();
outputStream.close();
inputStream.close();
outputStream = null;
out.clear();
out = pageContext.pushBody();
%>
最后查资料发现在HTML5中提供了download属性，只要写了这个属性可以直接下载图片而不是直接打开；可惜只支持h5，不然省事多了
下载
download中为下载文件的文件名。
以上这篇javaweb页面附件、图片下载及打开(实现方法)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

pdfjs下载地址：http://mozilla.github.io/pdf.js/getting_started/#download



解压后放在vue项目 public下面



使用：

1.文件流预览

   

import { Message} from "element-ui";
//filename等于文件名  data指代后端返回的文件流  不是文件地址
//该函数可以下载各种类型的文件 如果是pdf格式的 使用pdfjs进行打开新页面预览 
export const downloadFile = (filename, data) => {
  filename = decodeURI(filename);
  let type = filename.substring(filename.lastIndexOf(".") + 1);
  let blob = new Blob([data]);
  let url = window.URL.createObjectURL(blob);
  //如果是pdf的 直接打开
  if (type === "pdf") {
    let path = `${
      window.location.origin
    }/pdfjs/web/viewer.html?file=${encodeURIComponent(
      url
    )}&filename=${encodeURIComponent(filename)}`;
    //注意参数 filename是额外处理的 pdfjs加载文件流的形式 如果使用blob转化的地址 文件名获取不到     需额外传参数 在pdfjs里面处理document.title

    var tempwindow = window.open("_blank");
    tempwindow.location = path;
    return;
  }
    //IE处理下载
  if (window.navigator.msSaveBlob) {
    try {
      console.log("ie");
      window.navigator.msSaveBlob(blob, filename);
    } catch (e) {
      Message({
        type: "error",
        message: "浏览器暂不支持下载",
        duration: 4000
      });
      console.log(e);
    }
  } else {
    var a = document.createElement("a");
    if (!a.click) {
      Message({
        type: "error",
        message: "浏览器暂不支持下载",
        duration: 4000
      });
      throw new Error('DownloadManager: "a.click()" is not supported.');
    }

    a.href = url;
    a.target = "_parent";
    if ("download" in a) {
      a.download = filename;
    }
    (document.body || document.documentElement).appendChild(a);
    a.click();
    a.remove();
    window.URL.revokeObjectURL(url);
  }
};

2.绝对路径地址预览 需满足 当前地址在浏览器可正常预览较为方便

 

let path = `${
      window.location.origin
    }/pdfjs/web/viewer.html?file=${encodeURIComponent(
      url
    )}&filename=${encodeURIComponent(filename)}`;
    //注意参数 filename是额外处理的 pdfjs加载文件流的形式 如果使用blob转化的地址 文件名获取不到     需额外传参数 在pdfjs里面处理document.title

var tempwindow = window.open("_blank");
tempwindow.location = path;

pdfjs 源码修改跨域和document.title

        1.跨域  viewer.js注释2323行

        

        2.修改title viewer.js getPDFFileNameFromURL函数修改 增加获取地址栏filename函数

        

代码：

//获取地址栏参数
function getQueryParams(key){
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
          var pair = vars[i].split("=");
          if(pair[0] == key){
            return pair[1];
          }
       }
       return(false);
}
function getPDFFileNameFromURL(url) {
  // var defaultFilename = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "document.pdf";
  //从地址栏获取filename
  return decodeURIComponent(getQueryParams('filename'))|| 'document.pdf'

  if (typeof url !== "string") {
    return defaultFilename;
  }

  if (isDataSchema(url)) {
    console.warn("getPDFFileNameFromURL: " + 'ignoring "data:" URL for performance reasons.');
    return defaultFilename;
  }

  var reURI = /^(?:(?:[^:]+:)?\/\/[^\/]+)?([^?#]*)(\?[^#]*)?(#.*)?$/;
  var reFilename = /[^\/?#=]+\.pdf\b(?!.*\.pdf\b)/i;
  var splitURI = reURI.exec(url);
  var suggestedFilename = reFilename.exec(splitURI[1]) || reFilename.exec(splitURI[2]) || reFilename.exec(splitURI[3]);

  if (suggestedFilename) {
    suggestedFilename = suggestedFilename[0];

    if (suggestedFilename.includes("%")) {
      try {
        suggestedFilename = reFilename.exec(decodeURIComponent(suggestedFilename))[0];
      } catch (ex) {}
    }
  }

  return suggestedFilename || defaultFilename;
}

如果是npm下载的pdfjs-dist 可能会出现未知bug 试过没成功 静态文件比较方便不考虑项目大小的话