草庐IT

javascript - 谷歌图表不适用于 Wkhtmltopdf

coder 2024-07-28 原文

我正在尝试使用 Google Charts 在 PDF 中生成多个图表。对于 PDF,我使用 CakePDF 和 Wkhtmltopdf 引擎。不过,我似乎在实际将 Google Chart 代码加载到 PDF 中时遇到了问题。这是我当前的 Javascript 代码。

<script type="text/javascript" src="https://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
//setTimeout(function() {google.load('visualization', '1.0', {'packages':['corechart']});}, 100);
google.setOnLoadCallback(drawChart);
function drawChart(doIt,taken, total, element) 
{
    if (typeof doIt === 'boolean')
    {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Type');
        data.addColumn('number', 'Courses');
        data.addRows([
          ['Taken', taken],
          ['Remaining', total - taken]
        ]);
        var options = {
                       'width':40,
                       'height':40};
        var chart = new google.visualization.PieChart(document.getElementById(element));
        chart.draw(data, options);
    }
 }
</script>

问题是,当我为可视化包执行 google.load 时,它会导致 Wkhtmltopdf 返回一个错误,指出引擎未返回任何数据。我在 Why does google.load cause my page to go blank? 发现了一个我认为相似的问题所以我试着做 setTimeout(function() {google.load('visualization', '1.0', {'packages':['corechart']});}, 100);这个解决方案的问题是,如果延迟太低,页面将无错误返回,但会完全空白;但是,如果我将延迟设置得太高,页面将不会加载包,Javascript 将在

处中断
var data = new google.visualization.DataTable();

当我调用函数时。此外,该海报指出了 document.write() 的问题,但如果我在将内容添加到页面之前或之后添加 document.write() 行,我没有任何问题。如果有人知道如何让 Google Charts 与 Wkhtmltopdf 一起工作并且可以帮助我,我将不胜感激。


好的,为了让 API 有更多时间加载,我将调用函数的位置移到了 PHP 的末尾。现在,它只是设置一个需要在其中绘制图形的元素数组和适当的值,然后它使用数组中的值调用该函数。我不确定现在的问题是什么,因为它正在打破 chart.draw(data, options); 现在。不过,它似乎获得了传递给它的正确值和元素。

这看起来真的很迂回,因为它确实如此。无论出于何种原因,Wkhtmltopdf 都无法读取我放入 javascript 标记中的任何内容。我已尽我所能让它阅读,但它就是不会哈哈。 CakePDF 插件可以读取 Javascript,所以我的 JS 代码是默认的 PDF 布局。然后在 WkhtmltoPdf 呈现的实际 View 中,我创建了一个元素和值数组。然后我这样做(在许多不同的可能解决方案之后,这是我能够调用 JS 函数的唯一方法)

for ($i = 0; $i < sizeof($grade_array); $i++)
{
    $element = $grade_array[$i][2];
    echo '<script type="text/javascript">drawChart(true, '.$this->Js->value($grade_array[$i][0]).', '.$this->Js->value($grade_array[$i][1]).','.json_encode($element).');</script>';
}

它似乎传递了所有正确的数据。调用该函数后,我有打印参数的调试行,并且所有参数都已正确打印。我还注意到,如果我在与 chart.draw() 相同的位置执行 document.write('test'),它将毫无错误地写入“test”。出于某种原因,如果我执行 chart.draw(),它只是说 Wkhtmltopdf 没有返回任何数据。

最佳答案

问题: 当在 html 页面(使用 Google Chart)上使用 wkhtmltopdf/wkhtmltoimage pdf/image 时,它​​不包含 Google 图表。输出 (pdf/png) 在 Google Chart 应该显示的位置只是空白。当然,原始的 html 页面是可以的。

解决方案: 我通过替换解决了这个问题(Google Charts + wkhtmltopdf):

<script src="http://www.gstatic.com/charts/loader.js"></script>

通过

<script src="http://www.google.com/jsapi"></script>

wkhtmltopdf 库无法处理包含第一个 javascript include 的 Google Chart html 页面。

关于javascript - 谷歌图表不适用于 Wkhtmltopdf,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19471128/

有关javascript - 谷歌图表不适用于 Wkhtmltopdf的更多相关文章

  1. ruby-on-rails - 由于 "wkhtmltopdf",PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中,我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  2. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前,我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞,我可以在一个地方轻松完成,而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  3. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序,它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择,是开发还是生产,一些方法的逻辑应该改变,这取决于部署类型。是否有任何想法,如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现? 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  4. ruby - inverse_of 是否适用于 has_many? - 2

    当我使用has_one时,它​​工作得很好,但在has_many上却不行。在这里您可以看到object_id不同,因为它运行了另一个SQL来再次获取它。ruby-1.9.2-p290:001>e=Employee.create(name:'rafael',active:false)ruby-1.9.2-p290:002>b=Badge.create(number:1,employee:e)ruby-1.9.2-p290:003>a=Address.create(street:"123MarketSt",city:"SanDiego",employee:e)ruby-1.9.2-p290

  5. ruby - "undefined method"用于 rails 模型 - 2

    我正在使用带有Rails的Devise,我想添加一个方法“getAllComments”,所以我这样写:classUser在我的Controller中:defdashboard@user=current_user@comments=@user.getAllComments();end当我访问我的url时,我得到了undefinedmethod`getAllComments'for#我做错了什么?谢谢 最佳答案 因为getAllComments是一个类方法,而您正试图将其作为实例方法访问。您要么需要访问它:User.getAllCom

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言,一个比另一个好吗?还有更好的方法吗? 最佳答案 总结:Array#include?包含String元素,在接受和拒绝输入时均胜出,对于您的示例只有三个可接受的值。对于要检查的更大的集合,看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

  8. ruby-on-rails - Ruby "Undefined Method"用于类方法 - 2

    Ruby初学者努力简单地将这个@@people散列的值打印到控制台classPerson#haveafirst_nameandlast_nameattributewithpublicaccessorsattr_accessor:first_nameattr_accessor:last_name#haveaclassattributecalled`people`thatholdsanarrayofobjects@@people=[]#havean`initialize`methodtoinitializeeachinstancedefinitialize(first_name,last_

  9. python - 用于 Python 或 Ruby 的 Amazon Book API? - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:AmazonAPIlibraryforPython?我正在寻找一个AmazonAPI,它可以让我:按书名或作者查找书籍显示书籍封面获取有关每本书的信息(价格、评级、评论数、格式、页数等)Python或Ruby库都可以(我只想要最容易使用的库)。有什么建议么?我知道在SO上还有其他一些关于此的帖子,但这些API似乎很快就过时了。[几个月前我尝试了几个建议的Ruby库,但无法让它们中的任何一个工作。]

  10. ruby-on-rails - 使用 gmaps4rails 动态加载谷歌地图标记 - 2

    如何只加载map边界内的标记gmaps4rails?当然,在平移和/或缩放后加载新的。与此直接相关的是,如何获取map的当前边界和缩放级别? 最佳答案 我是这样做的,我只在用户完成平移或缩放后替换标记,如果您需要不同的行为,请使用不同的事件监听器:在你看来(index.html.erb):{"zoom"=>15,"auto_adjust"=>false,"detect_location"=>true,"center_on_user"=>true}},false,true)%>在View的底部添加:functiongmaps4rail

随机推荐