前端预览pdf——直接访问后台开放的静态资源/文件流

一、直接访问后台静态资源(静态资源文件夹后台已开放)

作为前端开发人员，自己用egg.js框架后台测试

1.egg.js配置开放public静态资源文件夹，可以直接接口形式预览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,
  },
};

返回路径

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

项目中 后台是 java

1.后台开发人员开放spring boot 中static文件夹
2.前端上传的word 后台转pdf放在static文件夹下

warning！！！
同事在本地开发环境中这种方式可以，但是 打完jar包后，部署就找不到静态文件夹路径了，这是个问题。后来还是用了插件预览。

二、文件流形式

前端把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链接，从官网上下载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)
      );
    },