实现html下载为pdf时分页不切断table表格或者echarts图片

html转换为canvas再下载为pdf的办法网上已经很多了，（我用的是两个插件一个js文件的那种办法，html2canvas，jspdf）。

然而这种方法有个问题，如果我的图片中有表格或者图，并且分了好几页，那很可能我的图片会被分页隔断，如图：

一张图被割到了两页。

我的这张表是点击查看按钮只打开网页图，点击下载按钮会先打开页面，再实时生成canvas，然后下载为pdf，两个按钮打开的是同一个页面，但是功能不一样。

解决的思路是在转换为canvas之前，在图片前面添加一块空白（注意，这里是转换为canvas之前，而不是在页面初次渲染就给渲染成这样，不然如果只是点击查看的话图表前面很大一块空白会很奇怪）

实现方法为：

html部分：（添加个空的 id为filler1的div）

<div id ="filler1"></div>
<div id="chart" style="width: 100%; height: 500px;clear: both;"></div><br/>

js部分：（点击下载的时候，在filler1里添加高为20px的空白块）

    //下载文件download(){if(this.ifDownload){this.downloadPdf(false)/建立一个有一定高度的空白块div作为填充物let son = document.createElement("div")son.style.height = 20 +'px'document.querySelector('#filler1').appendChild(son)}

这样就可以分页不隔断图片了。注意！我这里的20px是计算好的，写死的，网上的htmltopdf的js文件中有个问题，它生成的canvas图片由于宽高比的设置，在屏幕分辨率宽不同时，生成的图片高也是不一样的，所以实际操作时代码中得写个判断，在分辨率宽不同时添加的div的高度应是不同的。

实现html下载为pdf时分页不切断table表格或者echarts图片相关推荐

【已解决】Word转换PDF时自动更新域导致图片表格的引用编号全部乱掉
问题背景最近在排版毕业设计,因为有很多图片和表格,为了省事,直接在文中引用图片,表格,就不用编号了,(这个时候文章的一级标题是'第1章'),但是学校要求一级标题的格式为"第一章" ...
word中存储矢量图，word转为PDF时矢量图不失真。以及Visio图片放入word后有大量空白
一.使用draw.io绘制好,然后导出为vsdx 1.我们可以在Visio中绘制图形(或者使用diagrams.net:Flowchart Maker & Online Diagram Sof ...
解决xhtmlrenderer flying-saucer-pdf-itext5 生成pdf时html中table分页内容太多挤到第二页问题。
使用 flying-saucer-pdf-itext5 生成pdf时html中table的行如果太高的话会被挤到第二页展示,导致第一页中空白一大块. 解决办法: 修改org.xhtmlrenderer ...
前端vue项目-关于下载文件pdf/excel
最近在做一些需求,需要下载一些文件信息,最频繁的就是下载excel文件到本地了看过了很多方法,做个整理吧哈哈哈哈参考的文章链接: https://www.cnblogs.com/jiangweic ...
SpringBoot+Vue+Itext实现前端请求文件流的方式导出PDF时在指定位置添加照片
场景 SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF: SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF_BADAO_LIUMANG_QIZHI的 ...
java 模板 word转pdf 可分页带图片
java 模板 word转pdf 可分页带图片之前写过一个简单的案例,但是在项目中完全不能满足客户的需求,所以重新用啦一种方式来写,采用了word转换pdf的方式,这种经过不断研究,满足了可分页, ...
计算机中pdf怎么预览,如何在浏览器中开启PDF时默认显示Adobe Reader XI工具栏
如何在浏览器中开启PDF时默认显示Adobe Reader XI工具栏_电脑基础知识_IT/计算机_资料 3682人阅读|3次下载如何在浏览器中开启PDF时默认显示Adobe Reader XI工具 ...
解决 linux（centos7）word转换pdf时，pdf乱码问题
本文解决当word转换为pdf时,pdf文档中的中文字体全部都是乱码(方框)的问题. 先简单的写一下word转换pdf的代码,这个网上有很多(最下方有引用一遍博客详细的讲解了如何转换) /**** @ ...
linux中安装openoffice，及解决转pdf时中文乱码或者中文不显示问题【离线】
linux中安装openoffice[离线] 目录安装openoffice启动openoffice查看openoffice运行状态启动时可能出现的问题openoffice在转pdf时,中文乱码或者中文 ...

实现html下载为pdf时分页不切断table表格或者echarts图片

实现html下载为pdf时分页不切断table表格或者echarts图片相关推荐

最新文章

热门文章