外贸行业建站,南通网站排名优化公司,网站后台更新 前台为啥没反应,百度站长工具平台场景: 需要将页面的局部信息打印出来#xff0c;只在前端实现#xff0c;不要占用后端的资源。经过百度经验#xff0c;决定使用 print-js和html2canvas组件。
1. 下载包
npm install print-js --save
npm install --save html2canvas
2. 组件内引用
scriptimpo…场景: 需要将页面的局部信息打印出来只在前端实现不要占用后端的资源。经过百度经验决定使用 print-js和html2canvas组件。
1. 下载包
npm install print-js --save
npm install --save html2canvas
2. 组件内引用
scriptimport printJS from print-jsimport print-js/dist/print.cssimport html2canvas from html2canvas/script
3. 执行打印方法
divel-card styleheight: 780px; overflow: auto;page-break-after:always;div refprintPaperReftemplate v-forindex in 15!-- 题目: 序号、类型、题干 --divdiv classnum{{index}}/div【单选题】div stylepadding-left: 10px;这是一道很难很难很难很难的单选题{{index}}}/div/div!-- 选项 --el-radio-group stylewidth: 100% el-radio v-foritem in [A, B, C, D] borderclassanswer_radio!-- 选项flex浮动 --div styledisplay: inline-flex;width: 90%;div classanswer_tag{{ item }}./div/divdiv stylefloat: right;i classel-icon-success stylecolor:#1aac1a;答案/i/div/el-radio/el-radio-group/template/div/el-card
/divimport printJS from print-jsimport print-js/dist/print.cssimport html2canvas from html2canvas
export default {name: ExamProcess,methods: {// 打印试卷printPaper() {html2canvas(this.$refs.printPaperRef, {backgroundColor: white,useCORS: true,foreignObjectRendering: false,windowWidth: document.body.scrollWidth,windowHeight: document.body.scrollHeight}).then((canvas) {const url canvas.toDataURL()this.img urlprintJS({printable: url,type: image,documentTitle: --,base64: true})})}}
}
遇到的问题:
1. html2canvas 文字向下偏移 解决: 使用html2canvas^1.0.0的版本 2. html2canvas转图片不清晰的问题 解决: 利用增大dpi dpi:DPI是指某些设备分辨率的度量单位。DPI越低扫描的清晰度越低DPI越高清晰度越高。 由于受网络传输速度的影响web上使用的图片都是72dpi照片使用300dpi或者更高350dpi会很清晰。 html2canvas(template, {dpi: 300,//加了一个这个设置 useCORS: true, //图片跨域相关allowTaint: false, //允许跨域图片跨域相关x: 0,//页面在横向方向上的滚动距离 横向上没有超过 所以设置为0y: window.pageYOffset,//页面在垂直方向上的滚动距离 设置了以后 超过一屏幕的内容也可以截取windowWidth: document.body.scrollWidth,//获取在x轴上滚动条中内容windowHeight: document.body.scrollHeight,//获取在y轴上滚动条中内容});解决后的效果:
