广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue将html页面生成高清晰pdf文件的方法
  • 673
分享到

vue将html页面生成高清晰pdf文件的方法

2024-04-02 19:04:59 673人浏览 安东尼
摘要

目录效果图如下流文件转成file总结需要借助html2canvas和jspdf这两个插件 首先是将页面用html2canvas生成base64的图片,再用jspdf将图片插入到pdf

需要借助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操作不大兼容

总结

到此这篇关于Vue将html页面生成高清晰pdf文件的文章就介绍到这了,更多相关vue将html页面生成pdf文件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue将html页面生成高清晰pdf文件的方法

本文链接: https://www.lsjlt.com/news/141184.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作