0

在我的网站上，我有一些 html 表格和一些来自 highcharts 的图表。我需要使用 tcpdf 导出所有内容。

所以我搜索了它，我创建的唯一东西是关于 svg 的。但我不知道如何将它与 tcpdf 一起使用。我想过将每个图表导出为 png 图像，然后将这些图像添加到 pdf 中，但我失败了。因为每次我导出图像时它都会询问我如何保存它，但我需要自动保存它。

请问您的解决方案是什么？

对不起我的英语不好。

4

2 回答 2

0

有很多TCPD 示例- 在那里您可以看到可以将图像导出为 pdf。或者你想要一些特别的东西？

注意：您可以找到一种如何从 highcharts 导出图像的方法：喜欢这里

于 2013-03-28T12:00:19.073 回答
0

我有一个相当简单的页面报告一些数字，屏幕上有几个图表。我认为 TCPDF 支持 SVG 并且图形是在 SVG 中生成的，这将是捕获它们的最佳格式，令人惊讶的是我找不到太多关于这样做的信息，所以这是我的 phantomjs 脚本的通用版本：

var dest_folder = 'C:\\myfolder\\subfolder\\';
console.log('Destination Folder: ' + dest_folder);

var page = require('webpage').create();
page.open('http://www.example.com/graphs_page/', function(status) {
if (status !== 'success') {
    console.log('Unable to load the address!');
    phantom.exit();
} else {
    console.log('Loaded Page');

    // Get the first graph
    graph_1_svg = page.evaluate(function() {
            return document.getElementById('results_graph_1').children[0].innerHTML;
    });
    console.log('graph_1_svg: ' + graph_1_svg.length + ' chars long');
    // Write to destination folder or report error to console
    var fs = require('fs');
    try {
        fs.write(dest_folder + 'graph_1.svg', graph_1_svg, 'w');
    } catch(e) {
        console.log(e);
    }

    // Get the second graph
    graph_2_svg = page.evaluate(function() {
            return document.getElementById('results_graph_2').children[0].innerHTML;
    });
    console.log('graph_2_svg: ' + graph_2_svg.length + ' chars long');
    // Write to destination folder or report error to console
    var fs = require('fs');
    try {
        fs.write(dest_folder + 'graph_2.svg', graph_2_svg, 'w');
    } catch(e) {
        console.log(e);
    }

    phantom.exit();
}
});

该页面具有两个用于 highcharts 的目标 div，results_graph_1 和 results_graph_2，highcharts 在其中创建一个子 div，然后在其中创建 svg，因此通过访问每个目标的第一个子 div 的内容，我们可以复制出 svg 并将其写入服务器上的一个文件。

之后拿起 SVG 文件放入您的 PDF。我不确定您的情况是什么，但我希望用户在单击下载 PDF 之前先在屏幕上查看报告，所以我将在第一阶段保存图表，并且 SVG 文件将在生成 PDF 之前准备好.

就运行 phantomjs 而言，如果您下载它，将这里脚本保存为 test.js，然后在命令提示符中转到您提取它的位置，例如 c:\phantomjs 并运行：

phantomjs.exe test.js

脚本的 console.log 部分将通知您其进度。哦，在运行之前更改脚本中的目标文件夹和目标网址。

于 2014-05-28T09:26:40.433 回答