vue前端预览后端返回的pdf文件流

request.js

// 响应拦截器
service.interceptors.response.use(
  // 如果您想获得http信息,如头或状态请返回响应=>响应
  // 通过自定义代码确定请求状态,这里只是一个例子,您也可以通过HTTP状态码来判断状态
  response => {
    // 导出excel
    const headers = response.headers
    if (headers['content-type'] === 'application/octet-stream') {
      return response
    }
    const res = response.data
    if (res.code !== 200 || !res.success) {
      Message({
        message: res.msg || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
      // 50008:非法令牌;50012:其他客户端登录;401:令牌过期;
      if (res.code === 401) {
        MessageBox.confirm('已注销,您可以取消停留在此页面,或重新登录', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error)
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }

packet.js

import request from '@/utils/request'

// 打印订单
export function orderPrint(data) {
  return request({
    url: '/api/Order/OrderPrint',
    method: 'post',
    data,
    responseType: 'arraybuffer',//一定要设置响应类型,否则页面会是空白pdf
    headers: {
      'Content-Type': 'application/json'
    },
  })
}

index.vue

import {orderPrint } from '@/api/packet'
    //打印
    printOrder(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let param={
            trackNoList: this.trackNoList,
            reportPrintType:1,
            reportPrintSize:1
          }
          orderPrint(param).then(res=>{
            console.log(res);
            if(res.status===200){
              const binaryData = [];
              binaryData.push(res.data);
              //获取blob链接
              let pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: "application/pdf" }));
              this.cancel('form')
              window.open(pdfUrl);
            }
          })
        } else {
          return false;
        }
      })
    },
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值