版本介绍
关于使用的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('打印结束')
})
}
}