vue将页面导出为pdf

最新推荐文章于 2024-07-24 16:24:30 发布

高大王竟然被注册

最新推荐文章于 2024-07-24 16:24:30 发布

阅读量514

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_42404521/article/details/109600347

版权

这篇博客介绍了如何在Vue项目中将页面内容导出为PDF文件。首先，需要下载相关依赖，然后定位到要导出的DOM元素。通过自定义div并设置ID来方便获取目标DOM。导出方法可放置于适当位置调用。如果遇到内容截取不全或分页问题，可通过调整参数解决，若页面过长导致滚动，可采用特定方法处理。

摘要由CSDN通过智能技术生成

1.下载依赖

第一个.将页面html转换成图片
npm install --save html2canvas 
第二个.将图片生成pdf
npm install jspdf --save

2.找到你需要下载的 dom

多块元素可以自定义一个div自定义一个id方便get到这个dom
将printOut这个方法放到 methods 调用即可

printOut(name) {
   
        let shareContent = document.getElementById('id9527'),//需要截图的包裹的（原生的）DOM 对象
          width = shareContent.clientWidth, //获取dom 宽度
          height = shareContent.clientHeight , //获取dom 高度
          canvas = document.createElement("canvas"), //创建一个canvas节点
          scale = 1; //定义任意放大倍数 支持小数
        canvas.width = width * scale; //定义canvas 宽度 * 缩放
        canvas.height = height * scale; //定义canvas高度 *缩放
        canvas.style.width = shareContent.clientWidth * scale + "px";
        canvas.style.height = shareContent.clientHeight * scale + "px";
        canvas.