wkhtmltopdf生成pdf时中断和canvas画柱状图的颜色值变为黑色

解决网页图表生成颜色与样式差异问题
原创 已于 2023-01-06 12:17:45 修改 · 486 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端

于 2023-01-06 11:56:26 首次发布
在网页端生成图表时遇到颜色和样式不符的问题，通过排查发现ctx.setLineDash([])导致生成失败，将此设置移除后可正常生成。同时，柱状图颜色由蓝色变为黑色，原来是ctx.fillStyle使用数组造成的，改为直接设置颜色字符串(#3149FF)解决了颜色问题。尽管如此，生成的图表仍与网页端存在微小差异，主要是虚线和背景色的淡度。目前大体问题已解决，剩下一些细节调整。

在网页端一切正常的情况下进行生成时，试了好多次都如下面所示

最终经过一步步排查发现是在画图时设置了ctx.setLineDash([]);导致把此设置删除后即可成功生成，但ctx.setLineDash([]);是把虚线设置为实线的过程，所以处理这里可以把画实现放在画虚线前即可，还有一个更快捷的方式就是设置为ctx.setLineDash([0,0]);亲测有效

最低0.47元/天 解锁文章
HtmlToPdf、wkhtmltopdf工具
05-25
C#文件网页预览用到wkhtmltopdf类，C#文件网页预览文章中使用到
利用wkhtmltopdf 生成pdf
12-28
2. **JavaScript整合**： wkhtmltopdf 在渲染页面时会执行JavaScript，因此可以用于动态生成内容或计算值。但复杂的交互可能无法完全实现，因为转换过程中没有用户交互。 3. **图片处理**：默认情况下，wkhtmltopdf...
生成pdf之wkhtmltopdf出现table边框中断
xiaobozhang1993的博客
02-20 1047
pdf预览出现了边框中断（类似虚线），在同事1080p分辨率调整了td宽度后，他那没有了，但是我这还有。通过页面放大后，查看并没有中断，打印完毕也一切正常，暂时还不知道什么原因。。。 ...
SpringMVC整合wkhtmltopdf中图片失真的问题
一个人的博客
11-14 1994
最近使用一个wkhtmltopdf的工具，将html转成pdf，据网上说这是目前比较好用的pdf转换工具了，最主要的是它是免费的。但是在转换过程中会出现图片失真的问题，这可让大伤脑筋。好好的图片转换出现，成了这样 通过一番分析，最后把问题锁定在了图片本身上。然后我找UI帮我看了看这张失真图片到底有何蹊跷。果不其然这几张失真的图片都是颜色格式都是CMYK编码的，改成RPG后图片正常使用。 附...
使用html2canvas保存页面为pdf格式
chu_han_qiao的博客
03-23 571
应项目需求将页面导出为pdf格式（包含echarts图表） 遇到的问题： 1 使用mCustomScrollbar插件后导致父级元素自动给了position定位 2 父级元素给了固定高度100%（导致滚动条下的内容黑屏） 以上两个因素导致页面不能正常导出pdf 解决方案： 在导出前，设置要导出元素的父元素的高度为auto，导出成功后再将高度设置回来 1.下载 html2canvas.js、jsPdf.debug.js 插件，并在页面引入 <style> #rightC
使用wkhtmltopdf包将html转pdf的时候，图片不显示问题
qq_41476714的博客
03-20 2265
使用wkhtmltopdf包将html转pdf的时候，图片不显示问题 一个问题，两个现象，即： 1.调用wkhtmltopdf将html转pdf时，图片不显示 2.如下图所示
精选资源
html-pdf:使用wkhtmltopdf从具有自定义页眉和页脚HTML生成PDF
05-07
:page_with_curl: 使用wkhtmltopdf v2021.4.115从具有自定义页眉和页脚HTML生成PDF 错误很明显:trade_mark:-MATRIX NodeJs LTS版本要求 >=12.13.0 建立在NodeJ上 v14.16.0 必须使用async和await关键字。 仅支持最新...
精选资源
odoo13 记录解决 wkhtmltopdf 生成的PDF 格式不正确的问题
01-20
在本地开发测试时，样式是没有问题的，将其部署到服务器后，发现转出的PDF格式不对， 在 odoo doc/howtos/backend.rst 文件中，看到提示 If it appears that your PDF report is missing the styles (i.e. the ...
resume:我的简历，用普通的 HTML 和 CSS 编写，通过 wkhtmltopdf 生成 PDF
05-29
每当提交被推送到 GitHub 上的master分支时，就会在 Netlify 上触发一个新的构建，这将重新生成 PDF。 本地建筑 确保安装了wkhtmltopdf ： [macOS] brew cask install wkhtmltopdf [Debian-based] sudo apt-get ...
网上资源找到的，html页面转canvas最后转为pdf格式。
aydongzhiping的博客
07-21 608
通过html2canvas将html页面转换为图片，再将图片通过一定比例缩放生成pdf，点击触发下载事件。 //依赖 //下载生成的pdf文件 document.getElementById('download').onclick = function() { this.parentNode.removeChild(this); html2canvas(documen
Html转pdf 页面直接完成 无需后台 html2canvas+ jsPdf
09-28
html2canvas jsPdf html页面截图保存pdf，由于表格线问题，所以在里面进行替换，无需后台操作，不过有问题的是如果多页那么抓取也的div标签内容过多，不好进行分页处理，效果一般
echarts图标生成pdf所需文件
12-08
echarts生成pdf所需文件，其中包括echarts.min.js、html2canvas.min.js、jspdf.min.js
使用wkhtmltopdf工具生成pdf
baobo4566的博客
11-02 348
背景：将前台页面转换成pdf文档保存到服务器 最开始计划使用canvas2pdf在前端进行生成。但是canva2pdf转换的pdf有严重的失真问题，然后决定使用wkhtmltopdf工具进行生成。 思路：服务器准备好模板（html页面），前台将数据传回后台，将数据把模板中的占位符替换掉，然后生成临时html页面，再使用wkhtmltopdf工具将html页面转换成pdf 这...
wkhtmltopdf使用中echart等渲染问题
u010543591的博客
08-19 956
问题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
将文件夹下所有pdf变成黑白的脚本
Jesus in my place
08-10 1871
#!/bin/bash for file in ./*.pdf do echo "$file" gs -o black+white.pdf -sDEVICE=pdfwrite -dPDFSETTINGS=/prepress -sColorConversionStrategy=Gray -sColorConversionStrategyForImages=Gray -sProcessColo
html页面导出pdf截断问题,利用wkhtmltopdf(thead)将网页导出为pdf方法；以及存在表格图片被分页打断的问题解决方法...
weixin_36099503的博客
06-03 2905
1、将html文件转为pdf文件的函数：html_path-----html路径；pdf_path-----pdf路径 bool HtmlToPdf(QString html_path, QString pdf_path) { QFile::remove(pdf_path); int result = 0; wkhtmltopdf_global_settings * gs...
【Spire.PDF】绘制柱状图，兼容性强，可自定义数据
GreAmbWang的博客
06-18 938
用C#写了一个绘制柱状图的方法，只需传入参数即可，自动绘制 先看看效果 柱状的宽度自动调整 可自定义绘制位置，柱状图大小，数据 可自定义柱状图标题，X轴和Y轴描述信息 当X轴名称较长时，可以设置旋转一定的角度 全部代码 public class ReportTest { /// <summary> /// 初始化 /// </summary> public void I...
html转pdf（总结五种方法Java）
热门推荐
小强快跑~~
08-17 3万+
Java 实现html转pdf，总结五种方法。推荐使用wkhtmltopdf,Itext。
wkhtmltopdf 水印 背景,如何获取wkhtmltopdf以显示th和td背景渐变？
weixin_39953618的博客
12-24 168
I need to add background gradients to some td and th elements in page which gets converted to PDF, however I'm getting some very strange behavior from wkhtmltopdf, so when I do this:table {width: 100...
wkhtmltopdf生成PDF，字体变小和加粗
最新发布
06-17
### 使用 wkhtmltopdf 生成 PDF 时字体变小和加粗的解决方案 在使用 `wkhtmltopdf` 将 HTML 转换为 PDF 时，可能会遇到字体样式问题，例如字体变小或加粗。以下是一些可能的原因及解决方案： #### 1. 确保字体文件正确加载 如果字体在 HTML 页面中显示正常，但在生成的 PDF 中出现问题，可能是由于 `wkhtmltopdf` 无法正确加载外部字体文件。确保在 CSS 中指定的字体路径是可访问的，并且支持跨域加载。 ```css @font-face { font-family: 'Open Sans'; src: url('https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2') format('woff2'); font-weight: normal; font-style: normal; } body { font-family: 'Open Sans', sans-serif; font-size: 14px; /* 确保字体大小符合预期 */ } ``` 如果字体仍然无法正确加载，可以尝试将字体文件下载到本地并引用本地路径[^1]。 #### 2. 设置正确的缩放比例 `wkhtmltopdf` 提供了一个参数 `--zoom`，用于调整页面的整体缩放比例。如果字体显得过小，可以通过增加缩放比例来解决： ```bash wkhtmltopdf --zoom 1.2 input.html output.pdf ``` 通过调整 `--zoom` 参数，可以确保字体大小与预期一致[^3]。 #### 3. 避免 CSS 样式被覆盖 某些情况下，HTML 或 CSS 中的默认样式可能会被 `wkhtmltopdf` 内部的样式覆盖。为避免这种情况，可以在 CSS 中明确指定字体大小和样式： ```css body { font-family: 'Open Sans', sans-serif !important; font-size: 14px !important; font-weight: normal !important; } strong, b { font-weight: bold !important; } ``` 使用 `!important` 可以确保自定义样式优先于默认样式[^2]。 #### 4. 检查 JavaScript 加载时间 如果 HTML 页面依赖于 JavaScript 动态生成内容，可能会导致样式未完全应用。可以通过以下参数延迟 JavaScript 的执行时间，确保所有内容加载完成后再生成 PDF： ```bash wkhtmltopdf --javascript-delay 2000 --no-stop-slow-scripts --lowquality input.html output.pdf ``` `--javascript-delay` 参数允许设置延迟时间（单位为毫秒），确保动态内容有足够的时间加载[^4]。 #### 5. 测试不同环境下的表现 有时，字体问题可能与运行环境相关。建议在不同的操作系统或服务器环境中测试 `wkhtmltopdf` 的表现，确保字体文件能够正确加载。 --- ### 示例代码 以下是一个完整的命令示例，结合了上述解决方案： ```bash wkhtmltopdf \ --zoom 1.2 \ --javascript-delay 2000 \ --no-stop-slow-scripts \ --lowquality \ input.html output.pdf ``` 同时，确保 HTML 文件中的 CSS 样式如下： ```css @font-face { font-family: 'Open Sans'; src: url('/path/to/local/fonts/OpenSans-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } body { font-family: 'Open Sans', sans-serif !important; font-size: 14px !important; font-weight: normal !important; } strong, b { font-weight: bold !important; } ``` --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值