使用wkhtmltopdf将网页转换为PDF时echarts图表线条不完整

最新推荐文章于 2025-10-26 13:23:09 发布
原创 最新推荐文章于 2025-10-26 13:23:09 发布 · 3.3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#pdf #Echarts #wkhtmltopdf #动画

本文介绍如何解决使用wkhtmltopdf将包含ECharts的网页转换为PDF时出现的图表线条不完整的问题。通过禁用图表动画效果，确保PDF文件中的图表能够完整显示。

使用wkhtmltopdf将网页转换为PDF时echarts图表线条不完整，原因是echarts生成图表时有一个将折线图画出来的动画效果，去掉动画效果就好了

使用animation: false和title、tooltip是同级


前后效果


使用wkhtmltopdf把网页转换为pdf
小小刚优快云
07-09 2616
最近项目上需要做一个在线合同的功能，合同有电子版，需要把网页版的合同直接生产pdf，要求样式不能乱，有页码有页眉页脚等等，在网上搜索一段时间后，找到了一个工具叫: wkhtmltopdf ,这应该是国外的一款免费软件，有Windows，mac，linux版，直接在命令行调用，这几天完成了一个demo，顺便总结一下。这是此工具的官网: http://wkhtmltopdf.org/downloads...
wkhtmltopdf 导出pdf
07-24
导出网页到pdf工具。。 public static bool HtmlToPdf(string url, string path) { try { if (string.IsNullOrEmpty(url) || string.IsNullOrEmpty(path)) return false; Process p = new Process(); string str = System.Web.HttpContext.Current.Server.MapPath("~/wkhtmltopdf.exe"); if (!System.IO.File.Exists(str)) return false; string switches = "--print-media-type "; switches += "--margin-top 0mm --margin-bottom 4mm --margin-right 0mm --margin-left 0mm "; switches += "--page-size A4 "; // switches += "--no-background "; switches += "--redirect-delay 100%"; //p.SessionId == "1"; p.StartInfo.FileName = str; p.StartInfo.Arguments = switches + " " + url + " " + path; //p.StartInfo.Arguments = " \"" + url + "\" " + path; p.StartInfo.UseShellExecute = false; p.StartInfo.RedirectStandardInput = true; p.StartInfo.RedirectStandardOutput = true; p.StartInfo.RedirectStandardError = true; p.StartInfo.CreateNoWindow = true; p.Start(); System.Threading.Thread.Sleep(800); // p.SessionId p.WaitForExit(); p.Close(); return true; } catch (Exception ex) { HttpContext.Current.Response.Write(ex); } return false; }
wkhtmltopdf 将echarts的页面转为pdf 图表加载不上问题 或者图标显示不全问题解决
柠檬果茶
08-02 4880
  echarts加载不上，是因为echarts有画图的那个动作，所以需要去掉那个动画效果，具体代码如下。 plotOptions: {                     pie: {                         size:'80%',                         allowPointSelect: true,                   ...
wkhtmltopdf生成pdf echarts 不显示
dadao2003的博客
04-23 7250
百度了一天没结果。以为wkhtmltopdf不支持echarts，但是看到不少人能用，看来还是自己的问题 。一开始怀疑wkhtmltopdf 不支持canvas，后来排除。问题很简单：1、echarts 写在jquery的onload里，jquery的$(function(){});方法没有执行，也没多研究，把echarts 放到页面最下方，去掉onload方法。2、显示echarts的div要设...
wkhtmltopdf网页转PDF工具完整部署与使用指南
最新发布
weixin_36304957的博客
10-26 1081
wkhtmltopdf 是一款基于 WebKit 渲染引擎的开源命令行工具，能够将 HTML 页面精准转换为 PDF 文档。其核心优势在于无需浏览器环境即可实现高保真布局还原，广泛应用于报表生成、电子发票、文档归档等场景。在企业级应用中，常需引入私有品牌字体（如阿里普惠体、小米兰亭 Pro），而这些字体不宜放入系统目录。此时可通过配置fontconfig添加自定义搜索路径，并设定优先级策略。@page {
wkhtmltopdf生成pdf时echarts图表不显示的问题
weixin_50723565的博客
12-07 5272
这是一次wkhtmltopdf填坑经历 在这里用了html+Vue+Css+js做了一张报告，但是在使用wkhtmltopdf插件打印的过程中，出现了各种匪夷所思的现象，也可能是它很久没有维护的原因，于是本菜鸟经过一系列的查询资料和试验进行了如下排查: 1、由于vue的“Mustache”语法没有被解析出来，最先想到的可能是，可能是它生成报告时拍照太快,vue没有加载出来；改成用模板引擎，OK，有效果了，表格和其他的数据都差不多可以正常的显示了，但是echarts并没有显示。 2、于是又想到javascri
C# wkhtmltopdf导出pdf（含echarts）
weixin_43942765的博客
08-03 986
C# wkhtmltopdf导出pdf（含echarts）
wkhtmltopdf pdf内echarts图表不显示问题
weixin_62030083的博客
10-18 283
1：wkhtmltopdf不支持js的新语法 例如 let const map 尽量使用 var for循环。2：生成echarts图表时 需要给存放canvas的容器设置宽高]3:个别逻辑的不正确 会导致所有逻辑的不执行 需要排查一下。4：(function(){})()内存放的逻辑代码不执行。
moodle-tool_pdfpages：一个Moodle插件，可使用wkhtmltopdf将网页转换为PDF
02-25
请注意， wkhtmltopdf下的Qt浏览器比chromium浏览器低很多，因此下载的PDF的结果将根据每种支持的功能而有所不同。 Chrome驱动器 将Chromium或Chrome下载并安装到您的Moodle服务器上。 在基于debian的linux系统上，...
使用wkhtmltopdf将HTML转换为PDF的完整指南
为了判断一个目标页面是否适合使用wkhtmltopdf进行转换，文章提出了一种简单而有效的测试方法：在普通浏览器中打开目标URL，然后选择“另存为”功能将页面保存为本地HTML文件，再用本地浏览器打开该离线文件查看内容...
使用wkhtmltopdf将网页转换成PDF的技巧与教程
- 离线浏览：将用户经常访问的网页转换为PDF格式，以便于在没有网络连接的情况下查看。 4. wkhtmltopdf的安装与配置 - 下载安装包：根据操作系统的不同，可以从官方网站或者其他来源下载相应的安装包。 - 安装...
Python爬虫项目_使用requests和beautifulsoup抓取RUNOOB和廖雪峰网站的Python3教程内容_通过wkhtmltopdf将HTML转换为PDF格式的电.zip
08-28
这个工具非常适合于将网页内容转换成PDF文件，因为它能够保持原始网页的布局和样式。 在项目文件中，还包含了一些附赠资源，这些资源可能包括爬虫项目中用到的额外脚本、数据文件或其他相关资料。附赠资源通常用于...
HtmlToPdf、wkhtmltopdf工具
05-25
C#文件网页预览用到wkhtmltopdf类，C#文件网页预览文章中使用到
wkhtmltopdf参数说明--精讲
10-26
wkhtmltopdf是html转pdf的第三方开源工具,基于wekit内核,完美支持html5,css3,js,ajax; 并且支持windows与linux环境.网上有很多关于wkhtmltopdf的参数说明,但是大多简陋,这个文档敢说精讲,绝对比一般博客的详细得多,超出你想象
wkhtmltopdf使用中echart等渲染问题
u010543591的博客
08-19 963
问题1. wkhtmltopdf生成pdf过程中出现echart无法渲染问题，思路就是在服务端渲染echart图表，以base64形式展示到img标签上。asyncData是nuxt.js运行在服务端的生命周期。 ``` <script> import * as echarts from 'echarts' import { getChartOptions1 } from '@/utils/index' const Canvas = require('canvas') export defa
用wkhtmltopdf生成highcharts图表不美观，需要设置相应参数
IT生涯
06-25 3585
var chart = new Highcharts.Chart({ chart: { renderTo: 'container' }, // These make it work nicely with wkhtmltopdf plotOptions: { series: { enableMouseTracking: false, shadow: fals
wkhtmltopdf 解析chart不成功的问题
zxyheyen的博客
11-23 1068
wkhtmltopdf 解析chart不成功的问题
使用html2canvas将html转pdf，由于table表的水平和竖直有滚动条导致显示不全（或者有空白）
qq_42192641的博客
10-16 3573
使用html2canvas将html转pdf，由于table表的水平和竖直有滚动条导致显示不全（或者有空白）
wkhtmltopdf + echarts 一些问题总结
chuiwubi7749的博客
07-21 2545
wkhtmltopdf github wkhtmltopdf 使用手册 开启debug --debug-javascript 调试利器 不支持新的语法必如let 定义变量最好使用var 最好不要省略每条语句后面的分号`;` table 跨页导致表头重叠的解...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值