vue将html页面生成pdf文件
没用的a吉 人气:0需要借助html2canvas和jspdf这两个插件
首先是将页面用html2canvas生成base64的图片,再用jspdf将图片插入到pdf
效果图如下
createImage(){//生成图片->pdf let _this = this; //----此处是解决页面带滚动条的时候截图不全问题 window.pageYoffset = 0; document.documentElement.scrollTop = 0; document.body.scrollTop = 0;' //---------------------------------------- let canvas = document.createElement("canvas"); let context = canvas.getContext("2d"); let _articleHtml = document.getElementById('imageTofile'); let _w = _articleHtml.clientWidth; let _h = _articleHtml.clientHeight; //-----这里解决生成的pdf不清晰的问题 先放大3倍----后面再缩小3倍 let scale = 3; canvas.width = _w * scale; canvas.height = _h * scale; context.scale(scale, scale); let opts = { scale: 1, width: _w, height: _h, canvas: canvas, useCORS: true }; (window.html2canvas || html2canvas)(_articleHtml, opts).then(canvas => {//IOS13.4无效解决 和{(intermediate value)(intermediate value)} is not a function+; _this.createPdfAll(canvas, scale); }); },
我这里直接将整个的img插入到pdf,并未截断分页,因为截断的话需要调整,不太友好,不然会把文字从中间位置截断
createPdfAll (canvas, scale) {//生成图片->pdf //-----------宽高缩小3倍--------------------- let contentWidth = canvas.width / scale let contentHeight = canvas.height / scale //-------------------- let pdf = new jsPDF('', 'pt', [contentWidth, contentHeight+50]) //此处加50是pdf最后离底部的空白距离。根据需要自行调节 let pageData = canvas.toDataURL('image/jpeg', 1.0); //这里只生成了一页的pdf,并未截断,需要截断的话在此处操作 pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight) //这里是将pdf的流文件---》file文件 let filename = 'question.pdf' ; let datauri = pdf.output('dataurlstring'); let file = this.dataURLtoFile(datauri,filename); // 以文件的形式上传给服务器 this.uploadImg(file) },
流文件转成file
dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n); while(n--){undefined u8arr[n] = bstr.charCodeAt(n); } //转换成file对象 return new File([u8arr], filename, {type:mime}); //转换成成blob对象 //return new Blob([u8arr],{type:mime}); },
种方案纯前端实现,无需后端配合,并且页面还原度比较高,对于pdf操作要求不高的需求,还是比较合适的解决方案。
缺点就是无法复制,对pdf操作不大兼容
总结
加载全部内容