Vue前端实现预览并打印PDF文档

一. 需求

1. 点击文档列表中的【打印】按钮，获取后台生成的PDF的url，弹窗进行预览：

2. 点击【打印】按钮，进行打印预览和打印：

二. 需求实现

首先后台给的是word文档，研究了一圈后发现暂时无法实现（需要跳转谷歌预览、格式错乱等问题），于是要求后台大佬给换成pdf。

非常感谢大佬dearmrzhang的分享，这篇文章实现的需求比本文复杂的多，我这里只是单页pdf的预览和打印，大佬的分享则涉及img和pdf的分别处理、分页等，原文：手摸手系列之前端Vue实现PDF预览及打印的终极解决方案

我的代码比较简单，注意首先需要在项目引入这两个库：

vue-pdf

print-js

1. 模版

<template><div class="main"><div style="padding: 20px"><a-form layout="inline" style="color: black; margin-bottom: 22px"><a-row :gutter="48"><a-col><a-form-item label="运单号" style="margin-right: 30px"><a-input placeholder="请输入运单号" allow-clear size="large" v-model="queryParam.waybillNo"></a-input></a-form-item><sava-button class="button" @click="doSearch">查询</sava-button></a-col></a-row></a-form><a-tableref="table":columns="columns":dataSource="loadData":loading="loading":row-key="(record) => record.id":pagination="pagination"@change="handleTableChange"style="margin-top: 10px"><span slot="action" slot-scope="text, record"><!-- <a @click="handleEdit(record)" style="color: #2b79c2">编辑</a> --><a @click="viewDetail(record)" style="color: #2b79c2; margin-left: 10px">查看</a><a @click="printBill(record)" style="color: #2b79c2; margin-left: 10px">打印</a></span></a-table><a-modal :visible="previewVisibleForAll" :footer="null" @cancel="handleCancelAll" :width="800"><div style="overflow-y: auto; overflow-x: hidden"><a-button shape="round" icon="file-pdf" @click="handlePrint(printData)" size="small">打印</a-button><div id="printFrom"><pdf ref="pdf" :src="previewFileSrc"></pdf></div></div></a-modal></div></div>
</template>

2. 核心业务逻辑

<script>
// 两个库引入
import pdf from 'vue-pdf'
import printJS from 'print-js'
// 接口
import { reqWayBillList, reqBillReport } from '@/api/DigitalWayBill/DigitalWayBill'export default {components: {pdf,},data() {return {queryParam: {waybillNo: '',},columns: [],loadData: [],loading: false,pagination: {},mdl: null,enterpriseInfo: [],inspectorInfo: [],fenceParam: {},pdfUrl: '', // 你的 PDF 文件 URLprogress: 0,printData: {printable: 'printFrom',header: '',ignore: ['no-print'],},previewVisibleForAll: false,pageTotal: null,previewFileSrc: '',}},created() {this.doSearch()},methods: {doSearch() {this.loading = truereqWayBillList(this.queryParam).then((res) => {console.log('way bill list', res)this.loadData = res.recordsthis.loading = false})},handleTableChange(pagination) {const pager = { ...this.pagination1 }pager.current = pagination.currentthis.pagination1 = pagerthis.queryParam1.pageIndex = pagination.currentthis.doSearch()},viewDetail(record) {console.log('click view')this.mdl = { ...record }// 将获取的信息传递到新页面this.$router.push({path: '/bill/detail',query: {data: JSON.stringify(this.mdl),},})},printBill(record) {this.$message.success('生成文档需要一些时间, 请稍候...', 10)reqBillReport(record.waybillNo).then((res) => {console.log('pdf url', res)this.previewFileSrc = resthis.previewVisibleForAll = true}).catch((err) => {this.$message.error(`获取文档失败: ${err}`)})},handlePrint(params) {printJS({printable: params.printable, // 'printFrom', // 标签元素idtype: params.type || 'html',header: params.header, // '表单',targetStyles: ['*'],style: '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾ignoreElements: params.ignore || [], // ['no-print']properties: params.properties || null,})},printPdf() {this.$refs.pdf.print()// window.print()},handleCancel() {this.previewVisible = false},handleCancelAll() {this.previewVisibleForAll = false},},
}
</script>

3. 样式

没有额外的样式，都写在模版标签里了

三. 总结

市面上有一些pdf预览和打印的库，正如dearmrzhang大佬讲的，都有一些不足；通过与print-js的组合使用，才完美解决了预览和打印的需求。

感谢观看，希望本文能帮助您解决相关需求问题。