一. 需求

1. 點(diǎn)擊文檔列表中的【打印】按鈕，獲取后臺(tái)生成的PDF的url，彈窗進(jìn)行預(yù)覽：

2. 點(diǎn)擊【打印】按鈕，進(jìn)行打印預(yù)覽和打印：

二. 需求實(shí)現(xiàn)

首先后臺(tái)給的是word文檔，研究了一圈后發(fā)現(xiàn)暫時(shí)無(wú)法實(shí)現(xiàn)（需要跳轉(zhuǎn)谷歌預(yù)覽、格式錯(cuò)亂等問(wèn)題），于是要求后臺(tái)大佬給換成pdf。

非常感謝大佬dearmrzhang的分享，這篇文章實(shí)現(xiàn)的需求比本文復(fù)雜的多，我這里只是單頁(yè)pdf的預(yù)覽和打印，大佬的分享則涉及img和pdf的分別處理、分頁(yè)等，原文：手摸手系列之前端Vue實(shí)現(xiàn)PDF預(yù)覽及打印的終極解決方案

我的代碼比較簡(jiǎn)單，注意首先需要在項(xiàng)目引入這兩個(gè)庫(kù)：

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="運(yùn)單號(hào)" style="margin-right: 30px"><a-input placeholder="請(qǐng)輸入運(yùn)單號(hào)" 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. 核心業(yè)務(wù)邏輯

<script>
// 兩個(gè)庫(kù)引入
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 }// 將獲取的信息傳遞到新頁(yè)面this.$router.push({path: '/bill/detail',query: {data: JSON.stringify(this.mdl),},})},printBill(record) {this.$message.success('生成文檔需要一些時(shí)間, 請(qǐng)稍候...', 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', // 標(biāo)簽元素idtype: params.type || 'html',header: params.header, // '表單',targetStyles: ['*'],style: '@page {margin:0 10mm};', // 可選-打印時(shí)去掉眉頁(yè)眉尾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. 樣式

沒(méi)有額外的樣式，都寫(xiě)在模版標(biāo)簽里了

三. 總結(jié)

市面上有一些pdf預(yù)覽和打印的庫(kù)，正如dearmrzhang大佬講的，都有一些不足；通過(guò)與print-js的組合使用，才完美解決了預(yù)覽和打印的需求。

感謝觀看，希望本文能幫助您解決相關(guān)需求問(wèn)題。