首页 > 其他分享 >记一次使用laravel-snappy把g2和plotly.js图生成pdf踩坑经历

记一次使用laravel-snappy把g2和plotly.js图生成pdf踩坑经历

时间:2023-05-06 17:48:16浏览次数:29  
标签:laravel g2 -- wkhtmltopdf js plotly pdf

最近有一个需求,需要把页面上的echarts等js组件生成的图表放到pdf中。使用laravel框架,找到了laravel-snappy这个包,其底层是使用wkhtmltopdf来生成pdf。因为有把数据点都画到箱型图上的需求,找到了plotly.js这个组件,功能还是很强大的,可以轻松实现如下的效果

 页面都没问题,然使用laravel-snappy生成pdf文件中图形无论如何都显示不出来,一开始以为是页面上图表太多的原因,然后就发现了即使只有一个plotly.js或者g2画的图,生成的pdf文件也还是无法显示。echarts散点图只要不是数据太多,可以正常显示,当然前提要加上animation:false,这里还是要表扬下echarts。

至于plotly,js、g2图无法显示的问题,直接用命令行执行  wkhtmltopdf http://127.0.0.1:8000/pdf1 ./a.pdf  还是不行。

仔细阅读了 wkhtmltopdf 的文档,找到了如下的参数  :

1 --javascript-delay  3000  等待js执行3秒后再生成pdf

2  --no-stop-slow-scripts 允许执行较慢的js执行

3 --debug-javascript 显示错误

命令行加上--debug-javascript 后 wkhtmltopdf --javascript-delay 1000 --debug-javascript --no-stop-slow-scripts http://127.0.0.1:8000/pdf1 ./a.pdf  出现了下面的warning

 然而页面上同时引入的echarts并没有报错,g2和plotly却报错了。然后再调试,把页面上g2和plotly画图的代码去掉只引用g2.min.js和plotly,min.js后,命令行执行上面的命令,依然报错。无解的问题。令人沮丧。

 顺便要提一下的是:wkhtmltopdf底层使用QT浏览器,可以安装QT浏览器来进行调试:http://www.qtweb.net/download.html

 

标签:laravel,g2,--,wkhtmltopdf,js,plotly,pdf
From: https://www.cnblogs.com/caroline2016/p/17378097.html

相关文章

  • 在 iframe 中继承父窗口 css/js 的方法
    问题缘由iframe属于一个单独的文档(单独的网页窗口)不能直接使用父页面的资源,如css和js。如果iframe和父页面同域则可以在iframe中使用parent对象来使用父页的js对象继承css因为iframe是单独的网页窗口,所以页面一般都有head标签的。在iframe子页面的head......
  • 【转载】JS手从URL中获取指定参数,不需要正则,很方便
    参考https://zhuanlan.zhihu.com/p/412254881代码现代方式在现代浏览器中,我们可以使用浏览器提供的URL对象来获取参数。这里方法最简单,bug少,不用我们操心。functiongetQueryString(name){//consturl=newURL(window.location.href);consturl_string="htt......
  • laravel-permission 缓存导致的Redis带宽占用问题
     先决条件spatie/laravel-permission:3.18.0权限数:634角色数:94问题laravel-permission的缓存机制设计的不太合理将所有的权限存放在一个大set中,且存放了许多不必要的信息。当项目拥有大量的角色权限,使得这个set达到了11mb,非常影响性能。解决方案spatie/laravel......
  • 常见的js加密方式
      RSA、16进制、Base64都属于可逆加密方式,可以通过相应的解密方法将密文还原为明文。  而哈希算法是不可逆加密方式,只能将明文进行哈希后得到一段固定长度的密文,但无法通过密文还原出明文。其中,SHA算法、MD5算法都是常用的哈希算法。一、16进制加密  加密和解密示例:de......
  • servlet 访问jstl文件出现500情况
    可能原因是导入依赖包出现的问题。<dependency><groupId>javax.servlet.jsp</groupId><artifactId>jsp-api</artifactId><version>2.2</version><scope>provided</scope&g......
  • Three.js教程:访问几何体对象的数据
    推荐:将NSDT场景编辑器加入你的3D工具链其他系列工具:NSDT简石数字孪生访问几何体对象的数据实际开发项目的时候,可能会加载外部模型,有些时候需要获取模型几何体的顶点数据,如果想获取几何体的顶点数据首先要熟悉three.js几何体BoxGeometry和BufferGeometry的结构。访问几何体顶点......
  • Module build failed (from ./node_modules/css-loader/dist/cjs.js): TypeError: thi
    Modulebuildfailed(from./node_modules/css-loader/dist/cjs.js):TypeError:this.getOptionsisnotafunctionModulebuildfailed(from./node_modules/css-loader/dist/cjs.js):TypeError:this.getOptionsisnotafunction 用了各种办法,没有解决问题,直接把node_m......
  • 快速上手UmiJs
    先找个地方建个空目录mkdirmyapp&&cdmyapp通过官方工具创建项目yarncreate@umijs/umi-app#或npx@umijs/umi-appCopy:.editorconfigWrite:.gitignoreCopy:.prettierignoreCopy:.prettierrcWrite:.umirc.tsCopy:mock/.gitkeepWrite:package.json......
  • web------JSF ----2
    JSF简介一、 什么是JSF:JavaServerFaces(JSF)是一种用于构建Web应用程序的新标准Java框架。它提供了一种以组件为中心来开发JavaWeb用户界面的方法,从而简化了开发。JavaServerFaces于2004年三月1.0版正式提出,清楚的将Web应用程序的开发者划分......
  • shell jq处理json字符串
    1.1工具介绍自己用shell处理json字符串的时候,开发输入格式的不通会导致解析字符串有问题,所以这里用到了jq工具jq是一款命令行下处理JSON数据的工具。其可以接受标准输入,命令管道或者文件中的JSON数据,经过一系列的过滤器(filters)和表达式的转后形成我们需要的数据结构并将......