vaadin：使用像 jspdf 这样的 javascript 库来创建 html 内容的 pdf

Question

我正在使用 Vaadin 7，我已经创建了一些图表，我想要 create/download html 内容图表的 pdf。我发现 javascript 库 'jspdf' 可以做我想做的事，但我不明白如何实现该库以及如何在 vaadin 中使用它。

一个简单的javascript代码可以用这行代码执行：

Page.getCurrent().getJavascript().execute("alert('Hello World')");

除此之外，我不知道该怎么做。

或者可能有另一种 better/simpler 创建 pdf 文件的方法。

Answer 1

使用 vaadin，您有两种创建 PDF 的方法：

生成 PDF 服务器端，这样您就可以完全控制生成的 PDF。我不会在这里解释如何做。
使用（例如）jspdf 库，它可以从您的 html 内容创建 PDF。结果可能会有所不同，具体取决于网络浏览器等。

要在 vaadin 中集成任何类型的 JS 库，您可以使用这种方法：

@JavaScript({ "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js", "bootstrap.js", "bootstrap_connector.js" })
public class JavascriptTooltipExtension extends AbstractJavaScriptExtension {

    public void extend(Link link) {

        Resource resource = link.getResource();

        String display = resource instanceof ExternalResource ? ((ExternalResource) resource).getURL().toString() : "???";

        getState().setDisplay(display);

        super.extend(link);

        attachTooltip();
    }

    protected void attachTooltip(Object... commandAndArguments) {

        invokeCallback("attach", commandAndArguments);
    }

    @Override
    protected Class<? extends ClientConnector> getSupportedParentType() {

        return Link.class;
    }

    @Override
    public BootstrapTooltipState getState() {

        return (BootstrapTooltipState) super.getState();
    }
}

Full JS integration example

vaadin：使用像 jspdf 这样的 javascript 库来创建 html 内容的 pdf

vaadin: use javascript library like jspdf to create pdf of the html content

html

javascript

java

pdf

vaadin