做一个个人网站多少钱,中煤建设协会网站,网站对齐原则,网站开发技术报告模板一、需求#xff1a;在手机端/pc端实现一个表格页面#xff08;缴费单/体检报告单等#xff09;的导出功能#xff0c;便于用户在本地浏览打印。 二、实现#xff1a;之前在pc端做过预览打印的功能#xff0c;使用的是print.js之类的方法让当前页面直接唤起打印机的打印预…一、需求在手机端/pc端实现一个表格页面缴费单/体检报告单等的导出功能便于用户在本地浏览打印。 二、实现之前在pc端做过预览打印的功能使用的是print.js之类的方法让当前页面直接唤起打印机的打印预览功能但是手机端这种方式不太友好所以采用如下方式实现
1.将要打印的页面转换成图片 用到的组件 html2canvas
2.然后将图片导出成PDF 用到的组件 jspdf 。
安装依赖
npm install --save html2canvas // 页面转图片
npm install jspdf --save // 图片转pdf
在utils文件夹创建一个pdf.js文件实现页面转图片导出成A4纸大小的pdf文件
import html2canvas from html2canvas;
import jsPDF from jspdf;/*** 导出pdf * param {*} page 要打印的区域* param {*} name 下载导出的名字*/
export const downloadPDF (page, name) {html2canvas(page).then(function (canvas) {canvas2PDF(canvas, name);});
};//图片转pdf
const canvas2PDF (canvas, name) {let contentWidth canvas.width;let contentHeight canvas.height;//a4纸的尺寸[595.28,841.89]html页面生成的canvas在pdf中图片的宽高let imgWidth 595.28;let imgHeight (592.28 / contentWidth) * contentHeight;// 第一个参数 l横向 p纵向// 第二个参数测量单位ptmm, cm, m, in or pxlet pdf new jsPDF(p, pt);pdf.addImage(canvas.toDataURL(image/jpeg, 1.0),JPEG,0,0,imgWidth,imgHeight);pdf.save(name 报告单.pdf);
};在要打印的页面触发这个下载导出的方法
templatediv classreferralDetailvan-nav-bartitle报告单left-arrowclassblue-barclick-lefttoBack/van-nav-bar!-- refprint 设置要打印的区域 --div classdrawerBody idprint refprinth1 classformTitle{{ infoObj.fromHospitalName || }}报告单/h1span classzzCode报告编码{{ infoObj.twrCode }}/spandiv classformContentdiv v-foritem in titleArr :keyitem.label classcontentItemdiv classitemTitlespan{{ item.label }}/span/divdiv classitemContentspan{{ infoObj[item.value] }}/span/div/div/div/divvan-tabbar classcontent-tabbardiv classcontent-tabbar-blockvan-buttonsizenormalcolor#3378E0clickhandleExport(infoObj.fromHospitalName)导出/van-button/div/van-tabbar/div
/template
script
import { downloadPDF } from /utils/pdf.js; // 工具方法导出操作
export default {name: referralDetail,data() {return {infoObj: {},titleArr: [{ value: xxx, label: 患者姓名},{ value: xxx, label: 身份证号},{ value: xxx, label: 性别},{ value: xxx, label: 联系方式},{ value: xxx, label: 转入机构},{ value: xxx, label: 转诊类型},{ value: xxx, label: 审批医生},{ value: xxx, label: 接收科室},{ value: xxx, label: 转出机构},{ value: xxx, label: 转出科室},{ value: xxx, label: 转出医生},{ value: xxx, label: 申请日期},{ value: xxx, label: 转诊状态},{ value: xxx, label: 医保类型},{ value: xxx, label: 主要诊断},{ value: xxx, label: 病情等级}],};},created() {if (this.$route.query) {this.infoObj this.$route.query.infoData;}},methods: {// 导出handleExport(name) {//调用打印方法打印区域导出名称downloadPDF(this.$refs.print, name);},// 倒退toBack() {this.$router.go(-1);},},
};
/scriptstyle langless scoped/style界面效果如下 点击导出按钮得到的pc端查看效果如下
