一、直接訪問后臺靜態(tài)資源(靜態(tài)資源文件夾后臺已開放)

作為前端開發(fā)人員，自己用egg.js框架后臺測試

1.egg.js配置開放public靜態(tài)資源文件夾，可以直接接口形式預覽pdf 例：http://127..0.0.1:7001/public/syl.pdf
2.把文件上傳到public文件夾下
3.此處測試案例 為上傳的也是pdf形式文件

egg.js配置

在plugin.js中添加 config.defalut.js中默認可以不需要配置

exports = {
  static: {
      enable: true,
  },
};

返回路徑

可根據(jù)文件名或者某一唯一確定文件的字段 返回路徑
前端直接window.open('http://127..0.0.1:7001/public/syl.pdf (文件名)')

項目中 后臺是 java

1.后臺開發(fā)人員開放spring boot 中static文件夾
2.前端上傳的word 后臺轉pdf放在static文件夾下

warning?。?！
同事在本地開發(fā)環(huán)境中這種方式可以，但是 打完jar包后，部署就找不到靜態(tài)文件夾路徑了，這是個問題。后來還是用了插件預覽。

二、文件流形式

前端把word文件傳給java后臺
后臺把docx/doc格式文件轉為pdf文件流
前端接收到文件流 加上合理形式進行展示

問題

接口返回前端得到是亂碼(只要流正確不影響)
我使用pdf.js方法預覽,詳細可參考鏈接 pdf.js預覽

重點

請求時，加上
responseType: 'blob',
headers: {
"Content-Type": "application/pdf",
},
這兩個一定要加，不然即使后臺流正確，也打不開pdf

//預覽流
export const  wsPreview = (data) => {
    return axios({
        url: `/t/mailInfo/liuText?guid=${data}`,
        method: 'post',
        responseType: 'blob',
        headers: {
            "Content-Type": "application/pdf",
          },
    })
}

此處res是后臺返回的二進制文件流
window.open里的地址參考上面的pdf.js鏈接，從官網(wǎng)上下載pdf.js文件

    //預覽附件
    async preview(item) {
      let res = await this.$api.mail.wsPreview(item.id);
      var href = window.URL.createObjectURL(res);
      window.open(
        "../../static/web/viewer.html?file=" + encodeURIComponent(href)
      );
    },