Axios实现pdf预览

最新推荐文章于 2024-11-22 15:39:37 发布

原创最新推荐文章于 2024-11-22 15:39:37 发布 · 898 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue #ajax

Axios实现pdf预览

注：
1.blob转码会随机生成字符串，会与PDF文件名不一致
2.若需token，需后端进行过滤（或可选传递token）
3.确保后端是部署在tomcat

    //PDF预览
    pdfPreview(param) {
      let obj = {
        wjlj:参数
      }
      postAction(this.url.pdfPreview, obj).then((res) => {
        if (res.success) {
          const url = '/downfile?filePath=' + res.result
          this.getPdfCode(url)
        } else {
        }
      })
    },
    // 初始化获取pdf文件
    getPdfCode(filePath) {
      axios({
        method: 'get',
        url: filePath,
        headers: {
          'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        },
        responseType: 'blob' //设置响应的数据类型为一个包含二进制数据的 Blob 对象，必须设置！！！
      })
        .then((response) => {
          console.log(response)
          const binaryData = []
          binaryData.push(response)
          if (binaryData[0].size === 0) {
            this.$message.warning('无附件时的提示')
          } else {
            //获取blob链接
            let pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }))
            window.open(pdfUrl, '_blank')
          }
        })
    },