使用iframe在@vue/cli中实现二进制流PDF打印预览

版本介绍

关于使用的Vue版本说明

名称	版本
vue	2.6.11
vue-router	3.2.0
@vue/cli	4.5.15

具体实现

预览页面

由于业务功能是打印，这创建一个PirntPreview.vue组件，原理都是一样的

<template>
	<iframe
		frameborder="0"
		style="height: 100%; width: 100%; border: none;" 
		:src="$route.query.path">
	</iframe>
</template>

<script>
export default {
	name: 'PrintPreview'
}
</script>

说明：其中的src的取值$route.query.path，是通过路由传递的参数

路由配置

配置路由地址，与创建的预览页面关联

{
    path: "/print-preview",
    name: "PrintPreview",
    component: () => import('@/views/print/PrintPreview.vue'),
    props: true,
    hidden: true,
    meta: { title: "打印预览" },
    redirect: "",
    children: [],
}

逻辑实现

请求部分

这里利用了axios封装了一个print的方法

import axios from "axios";

export const print = (url, params) => {
  return new Promise((resolve, reject) => {
    axiosServer({
      url: url,
      params: params,
      method: "GET",
      responseType: 'blob'
    }).then((res) => {
      const blob = new Blob([res.data], {
        // 关键代码，配置类型
        type: 'application/pdf'
      })
      const { size } = blob;
      if (size > 0) {
        // 关键代码，处理二进制流为url
        resolve(window.URL.createObjectURL(blob))
      } else {
        resolve()
      }
    }).catch((err) => {
      reject(err)
      console.error(err)
    })
  })
}

调用部分

在具体的功能部分调用，创建方法实现调用

注：这里使用的是在新的标签页打开打印预览页路由地址

import { print } form 'request'

methods: {
  handlePrint() {
    const { form: { taskId } } = this
    print('此处填写请求的url地址', '此处填写传递的参数').then(res => {
      if (res) {
        let route = this.$router.resolve({
          path: `/print-preview?path=${res}`,
        });
        window.open(route.href, '_blank')
      } else {
        console.error('打印失败')
      }
    }).catch(err => {
      console.error('打印失败')
    }).finally(() => {
      console.error('打印结束')
    })
  }
}