电脑做网站服务器需要什么,钟祥网页设计,厦门网站建设手机,美食网站开发的意义一. 需求
1. 点击文档列表中的【打印】按钮#xff0c;获取后台生成的PDF的url#xff0c;弹窗进行预览#xff1a;
2. 点击【打印】按钮#xff0c;进行打印预览和打印#xff1a; 二. 需求实现
首先后台给的是word文档#xff0c;研究了一圈后发现暂时无法实现…一. 需求
1. 点击文档列表中的【打印】按钮获取后台生成的PDF的url弹窗进行预览
2. 点击【打印】按钮进行打印预览和打印 二. 需求实现
首先后台给的是word文档研究了一圈后发现暂时无法实现需要跳转谷歌预览、格式错乱等问题于是要求后台大佬给换成pdf。
非常感谢大佬dearmrzhang的分享这篇文章实现的需求比本文复杂的多我这里只是单页pdf的预览和打印大佬的分享则涉及img和pdf的分别处理、分页等原文手摸手系列之前端Vue实现PDF预览及打印的终极解决方案
我的代码比较简单注意首先需要在项目引入这两个库
vue-pdf
print-js
1. 模版
templatediv classmaindiv stylepadding: 20pxa-form layoutinline stylecolor: black; margin-bottom: 22pxa-row :gutter48a-cola-form-item label运单号 stylemargin-right: 30pxa-input placeholder请输入运单号 allow-clear sizelarge v-modelqueryParam.waybillNo/a-input/a-form-itemsava-button classbutton clickdoSearch查询/sava-button/a-col/a-row/a-forma-tablereftable:columnscolumns:dataSourceloadData:loadingloading:row-key(record) record.id:paginationpaginationchangehandleTableChangestylemargin-top: 10pxspan slotaction slot-scopetext, record!-- a clickhandleEdit(record) stylecolor: #2b79c2编辑/a --a clickviewDetail(record) stylecolor: #2b79c2; margin-left: 10px查看/aa clickprintBill(record) stylecolor: #2b79c2; margin-left: 10px打印/a/span/a-tablea-modal :visiblepreviewVisibleForAll :footernull cancelhandleCancelAll :width800div styleoverflow-y: auto; overflow-x: hiddena-button shaperound iconfile-pdf clickhandlePrint(printData) sizesmall打印/a-buttondiv idprintFrompdf refpdf :srcpreviewFileSrc/pdf/div/div/a-modal/div/div
/template2. 核心业务逻辑
script
// 两个库引入
import pdf from vue-pdf
import printJS from print-js
// 接口
import { reqWayBillList, reqBillReport } from /api/DigitalWayBill/DigitalWayBillexport 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},},
}
/script3. 样式
没有额外的样式都写在模版标签里了
三. 总结
市面上有一些pdf预览和打印的库正如dearmrzhang大佬讲的都有一些不足通过与print-js的组合使用才完美解决了预览和打印的需求。
感谢观看希望本文能帮助您解决相关需求问题。
