vue 打印页面（解决打印预览不全的问题）

不同分辨率下，页面内容打印不全的问题

参考的博客
https://www.cnblogs.com/scallop/p/14184580.html
参考的博客（scallop）

安装插件

print-js，html2canvas

页面使用

<template><div><el-button class="acticedBtn" @click="printFn">打印</el-button><div ref="printId">打印的内容</div></div>
</template>
<script>
import printJS from 'print-js';
import html2canvas from 'html2canvas';
export default {methods:{printFn(){const printContent = this.$refs.printId;// 获取dom 宽度 高度const width = printContent.clientWidth;const height = printContent.clientHeight;// 创建一个canvas节点const canvas = document.createElement('canvas');const scale = 4; // 定义任意放大倍数，支持小数；越大，图片清晰度越高，生成图片越慢。canvas.width = width * scale; // 定义canvas 宽度 * 缩放canvas.height = height * scale; // 定义canvas高度 *缩放canvas.style.width = width * scale + 'px';canvas.style.height = height * scale + 'px';canvas.getContext('2d').scale(scale, scale); // 获取context,设置scaleconst scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动轴滚动的长度const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; // 获取水平滚动轴的长度html2canvas(printContent, {canvas,backgroundColor: null,useCORS: true,windowHeight: document.body.scrollHeight,scrollX: -scrollLeft, // 解决水平偏移问题，防止打印的内容不全scrollY: -scrollTop}).then((canvas) => {const url = canvas.toDataURL('image/png')printJS({printable: url,type: 'image',documentTitle: '', // 标题style: '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}' // 去除页眉页脚})}).catch(err=>{console.error(err);})}}
}
</script>

vue 打印页面（解决打印预览不全的问题）相关推荐

vue 项目中实现pdf预览 pdf打印 pdf下载
在Vue项目中实现PDF预览.打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件. 可以使用npm安装pdf.js,命令如 ...
不同的电脑打印预览不同怎么解决_条码打印软件中标签预览正常打印无反应怎么解决...
在使用条码打印软件制作标签时,有客户反馈,标签打印预览正常的,但是打印无反应,咨询是怎么回事?今天针对这个情况,可以参考以下方法进行解决. 一.预览正常情况下,打印没反应 (1)在条码打印软件中设计好 ...
谷歌浏览器打印不弹出预览直接打印机打印
谷歌浏览器打印不弹出预览直接打印机打印注意 --kiosk-printing前面有个空格这个浏览器还是会弹出自带打印页,不过会马上消失的
前端vue利用flexpaper实现在线预览
前端vue利用flexpaper实现在线预览下载flexpaper 只需要用到js文件和FlexPaperViewer.swf: flexpaper_flash_debug.js flexpaper ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
Python excel转成html页面 excel 在线预览
Python excel转成html页面 excel 在线预览因为这两天公司的项目要用到在浏览excel 所以就在做这个功能.一开始查了很多资料都是各种不行,最后好不容易找到一些辅助资料终于是今 ...
vue移动端实现图片预览
接着上文的文件上传.下载.删除继续往下说,我们先说移动端的图片格式预览上文说到了vue引用了vant插件,是一个很好用的移动端开发组件,它自带了上传文件的方法,当然也带了图片预览的方法图片预览其实 ...
Vue前端JavaScript实现PDF预览与图片预览
Vue前端JavaScript实现PDF预览与图片预览说明 PDF.JS 代码实现预览测试 embed与iframe标签 `<embed>` `<iframe>` 浏览器预 ...
vue实现移动端图片预览
vue实现移动端图片预览 1.安装插件 2.main引入 3.使用注意扩展通过使用vue-photo-preview插件,实现移动端图片的预览,全屏等功能. 1.安装插件 npm install ...

vue 打印页面（解决打印预览不全的问题）

不同分辨率下，页面内容打印不全的问题

vue 打印页面（解决打印预览不全的问题）相关推荐

最新文章

热门文章