0

好的，所以我要求这个记录我的解决方案并自己回答，但欢迎对我的方法进行任何改进。

问题：我需要向嵌入在 iframe 中的 html 页面（因此它需要自己的 url）和 pdf 呈现报告。该报告包括一个不寻常的图表，我见过的任何图表 api 都不支持该图表。我的网站使用 Joomla！CMS (V. 2.5.*) 这意味着我的后端是 php 和 mysql。我需要在不受 Joomla 上设置的默认模板干扰的情况下呈现报告。我在 linux 主机上运行，​​（基本 LAMP）。Joomla 在他们的 html 中使用了 base 标签，这搞砸了 svg 的 url()。

4

1 回答 1

1

我的解决方案涉及以下内容：wkhtml2pdf、js、url 参数和编写 joomla 组件。

我编写了一个带有两个站点视图的基本 Joomla 组件，一个在 html 中生成报告，另一个在 iframe 中显示报告视图。所以报告有一个网址可以访问它，我有办法嵌入它。该组件还具有用于生成报告的 js 和 css 提取到单独的文件以包含在媒体文件夹中（但这只是为了代码清洁而不是功能）。

报表视图必须对页眉进行以下修改以使报表正确呈现（保存为图表），否则资源在错误的时间加载：

$document = &JFactory::getDocument();
$document->setBase('');//base tag screws up svg urls so get rid of it
$document->addscript('http://www.google.com/jsapi');
$document->addscript(JURI::root(true).'/media/com_metahealthzone/javascript/chart.js');
$document->addStyleSheet(JURI::root(true).'/media/com_metahealthzone/css/chart.css');

iframe 中使用的 url 必须附加 ?template=system，tmpl=component 不起作用，因为模板中的 css 仍然被应用。

为了让 Google 可视化看起来正确，我在末尾添加了 javascript 来OnLoadCallback抓取 svg 并添加 alinearGradient作为defs标签的子项id="svg_grad"（为什么 Google 不支持渐变，我不知道），然后抓取所有元素在需要渐变的图表中并将其填充设置为'url(#svg_grad)'. 由于 svg 命名空间，请记住使用setAttributeNS，并使渐变stop标记成为渐变的子级，而不是 defs 的子级。

我仍然需要对 VML（愚蠢的 IE）进行调整。

我也必须克服 wkhtml2pdf 的一些问题。当您使用 js 向 DOM 添加元素时，它的行为与其他浏览器不同。您必须保留返回的句柄，因为您无法使用document.getElement*类型函数获取新元素。此外，您必须指示 wkhtml2pdf 等待 js 运行使用--no-stop-slow-scripts，否则图形不会显示（它很慢）。--cookie <name> <value>我还必须通过使用参数为 wkhtml2pdf 设置 cookie 来模拟用户的会话。

于 2013-04-15T18:20:27.253 回答