vue js 前端导出下载打印图片 pdf html 局部打印

html2canvas将HTML内容写入Canvas生成图片

print.js 打印插件

第一种方法：原生js

  printDeal(val) {var printBox = document.getElementById(val);//拿到打印的区域的html内容var newContent = printBox.innerHTML;//将旧的页面储存起来，当打印完成后返给给页面。var oldContent = document.body.innerHTML;//赋值给bodydocument.body.innerHTML = newContent;//执行window.print打印功能window.print();// 重新加载页面，以刷新数据。以防打印完之后，页面不能操作的问题window.location.reload();document.body.innerHTML = oldContent;return false;},

注：这个方法打印完会刷新页面

第二种方法：使用插件 print-js

下方代码逻辑：先通过 html2canvas生成图片，再打印

注：最下边注释掉的代码是导出下载图片功能

//生成图片saveImg(val) {window.pageYoffset = 0;document.documentElement.scrollTop = 0;document.body.scrollTop = 0;// 先获取你要转换为img的dom节点var node = document.getElementById(val); //传入的id名称// console.log("node", node);var width = node.offsetWidth; //dom宽var height = node.offsetHeight; //dom高var scale = 2; //放大倍数 这个相当于清晰度 调大一点更清晰一点html2canvas(node, {width: width,heigth: height,backgroundColor: "#ffffff", //背景颜色 为null是透明dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素scale: scale,X: 0,Y: 0,scrollX: 0, //如果左边多个白边 设置该偏移-3 或者更多scrollY: 0,useCORS: true, //是否使用CORS从服务器加载图像 !!!allowTaint: true //是否允许跨域图像污染画布  !!!}).then(canvas => {// console.log("canvas", canvas);var url = canvas.toDataURL(); //这里上面不设值cors会报错this.imgurl = urlconsole.log(url)setTimeout(() => {// this.printDeal(val)print({printable: url,type: 'image',base64: true,header: '',headerStyle: 'text-align:center;color:#f00;width:100%;border:1px #000 solid;',// targetStyles: ['border', 'padding: 15px'],scanStyles: false,style: '' // 表格样式})}, 100)// var a = document.createElement("a"); //创建一个a标签 用来下载// a.download = "1"; //设置下载的图片名称// var event = new MouseEvent("click"); //增加一个点击事件// a.href = url; //此处的url为base64格式的图片资源// a.dispatchEvent(event); //触发a的单击事件 即可完成下载});},

vue js 前端导出下载打印图片 pdf html 局部打印相关推荐

vue：前端导出word 加图片：前端
导出word word模板放在vue的 static 里面 return中的数据引入的包 npm i jszip@^2.6.1 npm i file-saver@^2.0.2 npm i docx ...
vue后端返回数据流前端导出下载xls文件
后端返回数据流, 前端导出下载xls文件 export function exportMethod() {axios({method:'get',url: url+'params',responseT ...
vue.js php,vue.js去哪下载
vue.js可以去vue官网下载,其下载链接为"vuejs.org/v2/guide/installation.html",然后用" 本教程操作环境:Windows7系统 ...
vue和php网站下载,vue.js去哪下载
vue.js可以去vue官网下载,其下载链接为"vuejs.org/v2/guide/installation.html",然后用" 本教程操作环境:Windows7系统 ...
VUE纯前端导出excel表格功能《转载》
插件:使用vue-json-excel插件实现Vue纯前端导出简单的Excel表格功能. 使用方法 1. 安装依赖 npm install vue-json-excel 2. 引入组件 a. 全局引入 ...
Vue导出word附表部分横向显示(承接上一篇Vue纯前端导出word)
Vue纯前端导出word直通车 1. 引入js import htmlDocx from "@/utils/html-docx"; 2. page-break-before:alw ...
3.Vue.js前端框架：条件判断与列表渲染
3.1 条件判断在视图中,经常需要控制某些DOM元素的显示或隐藏.Vue.js提供了多个指令来实现条件的判断,包括 v-if.v-else.v-else-if.v-show指令.下面分别进行介绍. ...
uni-app 系统打印、AirPrint、支持ipad、打印图片 pdf webView文档
地址:系统打印.AirPrint.支持ipad.打印图片 pdf webView文档 - DCloud 插件市场系统打印.AirPrint.支持ipad.打印图片 pdf webView文档(ios ...
10.Vue.js前端框架：过渡
1.过渡的作用 Vue.js 内置了一套过渡系统,该系统是 Vue.js 为 DOM 动画效果提供的一个特性.在插入.更新或者移除 DOM 时可以触发 CSS 过渡和动画,从而产生过渡效果. 2.单元 ...

vue js 前端导出下载打印图片 pdf html 局部打印

vue js 前端导出下载打印图片 pdf html 局部打印相关推荐

最新文章

热门文章

vue js 前端导出 下载 打印 图片 pdf html 局部打印

vue js 前端导出 下载 打印 图片 pdf html 局部打印相关推荐

最新文章

热门文章

vue js 前端导出下载打印图片 pdf html 局部打印

vue js 前端导出下载打印图片 pdf html 局部打印相关推荐