vue html文件,

　　最近工作中遇到一个需求，需要导出一个可视化图表页面的pdf文件。所以下面这篇文章主要介绍如何利用vue从html页面生成高清PDF文件的相关信息，有需要的朋友可以参考一下。

效果图如下

　　image(){//生成图片-pdf

　　let _ this=this

　　//-这里是解决页面有滚动条时截图不完整的问题。

　　window . pageyoffset=0；

　　document . document element . scroll top=0；

　　document . body . scroll top=0；

　　//-

　　let canvas=document . createelement( canvas )；

　　let context=canvas . get context( 2d )；

　　let _ article html=document . getelementbyid( imageto file )；

　　let _ w=_ article html . client width；

　　let _ h=_ article html . client height；

　　//-这里要解决生成的pdf不清晰的问题，先放大3倍，后面再缩小3倍。

　　设scale=3；

　　canvas.width=_ w * scale

　　canvas.height=_ h * scale

　　context.scale(规模，尺度)；

　　让opts={

　　比例尺：1，

　　宽度：_w，

　　高度：_h，

　　画布：画布，

　　useCORS:对

　　};

　　(window . html 2 can vas html 2 can vas)(_ article html，opts)。然后(canvas={//iOS 13.4无效解且{(中间值)(中间值)}不是函数；

　　_ this . created fall(canvas，scale)；

　　});

　　这里我直接把整个img插入pdf，不截断分页，因为截断的话需要调整，不太友好，不然文字会从中间位置截断。

　　PDFall (canvas，scale){//生成图片-pdf

　　//-

　　让content width=canvas . width/scale

　　让content height=canvas . height/scale

　　//-

　　Pdf=newjs Pdf(， PT ，[内容宽度，内容高度50])//此处加50是PDF末尾距底部的空白距离。根据需要调整自己。

　　let pageData=canvas . toda taurl( image/JPEG ，1.0)；

　　//这里只生成一页pdf，不截断。如果需要截断，请在这里操作。

　　pdf.addImage(pageData， JPEG ，0，0，contentWidth，contentHeight)

　　//这里是pdf-《file file》的流文件

　　let filename= question.pdf

　　let data uri=pdf . output( dataurlstring )；

　　let file=this . dataurltofile(data uri，filename)；

　　//将其作为文件上传到服务器

　　this.uploadImg(文件)

流文件转成file

　　dataurltoFile(数据URL，文件名){

　　var arr=dataurl.split(，)；

　　var mime=arr[0]。匹配(/:(。*?);/)[1];

　　var bstr=atob(arr[1])；

　　var n=bstr.length

　　var u8 arr=new uint 8 array(n)；

　　while(n-){未定义

　　u8arr[n]=bstr . charcodeat(n)；

　　}

　　//转换为文件对象

　　返回新文件([u8arr]，文件名，{ type:mime })；

　　//转换为blob对象

　　//返回新的Blob([u8arr]，{ type:mime })；

　　这个方案是纯前端的，没有后端的配合，页面还原程度比较高，对于pdf操作的要求还是比较合适的解决方案。

　　缺点是不能复制，不兼容pdf操作。

总结

　　这就是这篇关于vue将html页面生成高清pdf文件的文章。有关vue将html页面生成为pdf文件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

vue html文件,

目录

效果图如下

流文件转成file

总结

相关文章阅读