从JavaScript将HTML页面转换为PDF

Manishearth

我正在用HTML / JS开发Windows 8笔记应用程序。

我可以使用画布覆盖图来获取可以导出到的图像,但是存在对齐问题。我希望有一种可靠的方法可以导出到PDF。需要导出的内容是在div中嵌入的一些HTML。

请注意,我可以保存字节流,但是我不知道如何将HTML转换为PDF字节流。必须使用JavaScript来完成,但是可以使用Windows 8 JS API。

该文档将包含MathJax和图像,因此应该不会有太多的对齐问题。

马丁·比比(Martin Beeby)

不确定PDF,但在Windows 8上,您可以使用Webview.capturePreviewToBlobAsync()函数创建图像。

它捕获了Webview中显示的所有内容,并且由于它是直接捕获,因此可以捕获IE11中可以显示的任何内容,包括MathJax。

我刚才写了一个简单的示例应用程序,能够捕获网站:图像。显然,您可以使用URL或插入自己的自定义HTML。

function printeWebViewToDiskThenDisplay() {
        var wc = document.getElementById("webview");
        Windows.Storage.ApplicationData.current.localFolder.createFileAsync("webview.png", Windows.Storage.CreationCollisionOption.replaceExisting).then(function (file) {
            file.openAsync(Windows.Storage.FileAccessMode.readWrite).then(function (stream) {
                var capturePreview = wc.capturePreviewToBlobAsync();
                capturePreview.oncomplete = function (completeEvent) {
                    var inputStream = completeEvent.target.result.msDetachStream();
                    Windows.Storage.Streams.RandomAccessStream.copyAsync(inputStream, stream).then(function () {
                        stream.flushAsync().done(function () {
                            inputStream.close();
                            stream.close();
                            var image = new Image();
                            image.src = URL.createObjectURL(file);
                            result.innerHTML = "";
                            result.appendChild(image);
                        });
                    });
                };
                capturePreview.start();
            });
        });
    }

HTML看起来像这样:

<button id="btnPrint">Print</button> 

<div style="transform:scale(1); transform-origin:0% 0%">
    <x-ms-webview id="webview" src="http://cdn.mathjax.org/mathjax/latest/test/sample.html"
                  style="width: 400px; height: 400px;">
    </x-ms-webview>
</div>
<div id="result"></div> 

结果如下:

Windows 8应用

您可以下载我在此处构建的粗略示例:

https://github.com/thebeebs/ASingleWebviewToImage

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章