第一点:在点击保存图片时,此时要保存的资源较多,造成模块并没有完全加载完毕,就已经生成了截图; 解决方案:(加上一个延时操作) // 利用 html2canvas 下载 canvas setTimeout(() => { html2canvas(img, { canvas: canvas }).then(function(canvas) { _this.photoUrl = canvas.toDataURL(); }); }, 500...
原因是因为, vue-grid-layout插件里有一个class(cssTransforms)冲突了,只需要在调用html2canvas之前把这个class去掉就可以了 //使用原生js移除该classnamelet gridItems= Array.from(document.getElementsByClassName("grid-item")); gridItems.forEach(item=>{ let classStr= item.getAttribute("class"); let newCl...
asynccutPicture() {constdesignPreview =this.$refs.designPreview;//解决dom里面滚动条截图不全的问题//重新复制一个dom 设置想要宽 高度为dom的clientWidthletclonedNode = designPreview.cloneNode(true);//复制一个clonedNode.setAttribute("style",`width:${"375px"};height:${designPreview.clientWidth};`);...
1. 安装html2canvas模块 npm install --save html2canvas 2.所需页面导入html2canvas模块 importhtml2canvasfrom'html2canvas' 3.html元素添加容器盒子 <divref="ewmBox"></div> 4.页面渲染完成执行canvas渲染 html2canvas(this.$refs.ewmBox,{/*相关配置项*/}).then(function(canvas){console.log(canvas.t...
首先是将页面用html2canvas生成base64的图片,再用jspdf将图片插入到pdf 效果图如下 createImage(){//生成图片->pdflet_this= this;//---此处是解决页面带滚动条的时候截图不全问题window.pageYoffset =0; document.documentElement.scrollTop =0; document...
2. 第二步:页面引用 import html2canvas from 'html2canvas' import JSPDF from 'jspdf' 1. 2. 第三步:页面生成图片 function createImg() { let _this = this //解决页面带滚动条的时候截图不全问题 window.pageYoffset = 0 document.documentElement.scrollTop = 0 ...
第一点 ：在点击保存图片时，此时要保存的资源较多，造成模块并没有完全加载完毕，就已经生成了截图； 解决方案：(加上一个延时操作)第二点 ：滚轮滑动造成的，主要是html2canvas是根据body进行截图，若内容高度高于body时，就会出现这样的问题(大概意思就是有滚动条时造成的) 解决方案：(在生成...
⾸先是将页⾯⽤html2canvas⽣成base64的图⽚，再⽤jspdf将图⽚插⼊到pdf 效果图如下 createImage(){//⽣成图⽚->pdf let _this = this;//---此处是解决页⾯带滚动条的时候截图不全问题 window.pageYoffset = 0;document.documentElement.scrollTop = 0;document.body.scrollTop = 0;'...
// window.pageYoffset = 0; // 如果有滚动条影响,会导致导出的内容不全,可以直接设置导出前置顶 // document.documentElement.scrollTop = 0; // document.body.scrollTop = 0; html2Canvas(htmlID, { allowTaint: true, // scrollY: 50, // 偏移量吧,如果有滚动条影响,但是不想设置滚动条置顶, 可...