使用vue预览PDF

效果图

讲解之前先看案例，强烈推荐此项目vue-pdf.js-demo

前端：
方法

filePreview(row){

        if (row.projectFeasibilityAnalysis != null ){
          let name = row.projectFeasibilityAnalysis[0].label
          let url = row.projectFeasibilityAnalysis[0].value
          if (name.lastIndexOf(".pdf") < 0){
            this.$message.warning("不是pdf文件，暂无法预览")
            return;
          }
          console.log()
          handleDownByUrlByPost2("/admin/sys-file/getFileByBucket", name, {"fileName": url}).then((response) => {
            const content = response.data
            const blob = new Blob([content])
            var url = window.URL.createObjectURL(blob)
            window.open('/pdf/web/viewer.html?file=' + encodeURIComponent(url))
          }).catch(response => {
            console.log(response)
          })
        }else {
          this.$message.error("没有附件")

        }
      },

window.open(’/pdf/web/viewer.html?file=’ + encodeURIComponent(url))

特别说明一下这句，encodeURIComponent这个方法是pdf.js提供的，
/pdf/web/viewer.html?file='这个路径我是放在的public里，所以没有加public路径，如果你放在了static里面需要加static,如下：

/static/pdf/web/viewer.html?file=

API

export function handleDownByUrlByPost2(fileUrl,filename,query) {
  return request({
    url: fileUrl,
    method: 'post',
    responseType: 'blob',
    params: query
  })
}

后端：

@PostMapping("/getFileByBucket")
	public void getFileByBucket(String fileName, HttpServletResponse response) {
		fileName = "d://xxx.pdf";
		File file = new File(fileName);
		byte[] data = null;
		try {
			FileInputStream fileInputStream = new FileInputStream(file);
			data = new byte[fileInputStream.available()];
			fileInputStream.read(data);
			response.getOutputStream().write(data);
			fileInputStream.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}