后端返回二进制文件流，前端vue实现在线预览

2020-07-07 11:38:06 阅读：801 来源： 互联网

标签：vue console log 预览二进制 url axios params data

首先后端的接口返回的只要二进制文件流，不要其他东西，我之前有别的字段，二进制流就得转成字符串返给前端，前端就还要再把字符串转成二进制流，没必要


import axios from 'axios'

export  const view=(url,body,params)=>{
  // let token = getTokens()
  // let queryParams = {docTemplate:'policy'}
  // Object.assign(queryParams, params)
  return axios({
    method: 'post',
    url: `${url}`,
    data: params,
    query: params,
    headers:{
      'Content-Type':"application/json;charset=UTF-8"
    },
    responseType: "blob"
  })

}
export  const img=(url,body,params)=>{
  // let token = getTokens()
  // let queryParams = {docTemplate:'policy'}
  // Object.assign(queryParams, params)
  return axios({
    method: 'post',
    url: `${url}`,
    data: params,
    query: params,
    headers:{
      'Content-Type':"application/json;charset=UTF-8"
    },
    responseType: "arraybuffer"//这是图片的返回类型
  })

}

这是封装axios，请求方法（post为例）

 import {view,img} from '@/assets/js/axios.js'//在需要用的.vue文件引入

pdf的话利用pdf.js插件

 await view('/document/viewDocument','',{ docID:data.docID,docTemplate:this.Type}).then(res=>{
                console.log(res)

                var blob = new Blob([res.data], {
                  type: 'application/pdf'})//这个是Content-Typele的type类型（https://tool.oschina.net/commons）
                console.log('blob=======')//
                console.log(blob)
                let fileURL= URL.createObjectURL(blob)
                let url=encodeURIComponent(fileURL)
                console.log(fileURL)//blob:http://localhost:8080/20a92c23-9734-4cea-8d6b-cff2e2a6e46b
                console.log(url)//blob%3Ahttp%3A%2F%2Flocalhost%3A8080%2F20a92c23-9734-4cea-8d6b-cff2e2a6e46b
                this.src = `http://pekbjdwdcs010:8098/pdf/web/viewer.html?file=${url}`;

                //
              }
            )

图片的话

await img('/document/viewDocument','',{ docID:data.docID,docTemplate:this.Type}).then(res=>{
                console.log(res)
              var url='data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, key) => data + String.fromCharCode(key), ''))
              // var url=`data:image/png;base64,${data.docStream}`
              this.src=url
              console.log(url)
              }
            )

标签：vue,console,log,预览,二进制,url,axios,params,data
来源： https://www.cnblogs.com/weidahange/p/13259797.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

后端返回二进制文件流，前端vue实现在线预览