将 HTML 页面从 JavaScript 转换为 PDF答案

【问题标题】：Convert an HTML page to PDF from JavaScript将 HTML 页面从 JavaScript 转换为 PDF
【发布时间】：2014-08-21 17:30:39
【问题描述】：

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

我可以使用画布覆盖来获取可以导出到的图像，但存在对齐问题。如果有一种可靠的方法可以导出为 PDF，我会更喜欢。需要导出的东西是一些嵌入在 div 中的 HTML。

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

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

【问题讨论】：

标签： javascript html pdf windows-8

【解决方案1】：

不确定 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>

结果如下：

您可以在这里下载我构建的粗略示例：

https://github.com/thebeebs/ASingleWebviewToImage

【讨论】：

【解决方案2】：

好的 HTML -> PDF 这并不容易，我的意思是您可以在打印对话框中手动保存为 .pdf 并因此受到 @media print .css 文件的支持。

但是我假设您希望它自动执行更改，筛选价格荒谬的商业软件，我设法找到以下...

https://github.com/MrRio/jsPDF

从外观上看，它应该可以执行您正在寻找的操作。

【讨论】：

您知道任何可靠地将 HTML 页面转换为图像（或一组图像）以便可以轻松插入到 pdf 中的方法吗？
我刚刚发现了一个非常有趣的插件@wkhtmltopdf.org，它说可以轻松转换为.pdf 和其他图像格式，可能值得研究。
谢谢，但它是在 C 中的 :) 我不能使用它，除非我对其进行授权或其他操作
确实有一个像你的@stackoverflow.com/questions/968201/convert-web-page-to-image 这样的问题，最喜欢的是khtmltopdf，所以我会深入研究一下。
@Manishearth 你在this page 上看过最后一个名为** NEW: addHTML() 的演示吗？它不是做你想做的吗？

【解决方案3】：

我已经使用jsPDF JS library 在 JS 中生成 PDF 文件，但根据您的描述，我不确定这是否是您要查找的内容

【讨论】：