0

I'm developing a Windows 8 note-taking app in HTML/JS.

I'm able to use a canvas overlay to get an image that I can export to, but there are alignment issues. I'd prefer if there was a reliable way to export to PDF. The stuff that needs exporting is some HTML embedded in a div.

Note that I have the ability to save a byte stream, but I don't know how to convert this HTML to a PDF byte stream. It's got to be done in JavaScript, but leveraging Windows 8 JS APIs is acceptable.

The document will contain MathJax and images, so there shouldn't be too many alignment issues.

Manishearth
  • 14,882
  • 8
  • 59
  • 76

3 Answers3

3

Not sure about PDF but on on Windows 8 you can create an Image using the Webview.capturePreviewToBlobAsync() function.

It captures everything that's displayed in the Webview and because it's a direct capture anything that can be displayed in IE11 can be captured including MathJax.

I wrote a simple sample app a moment ago and was able to capture the website: to an image. Obviously you could use a URL or insert your own custom 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 looked something like this:

<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> 

The result was the following:

Windows 8 App

You can download the rough sample I built here:

https://github.com/thebeebs/ASingleWebviewToImage

Martin Beeby
  • 4,523
  • 1
  • 26
  • 20
2

Ok for HTML -> PDF it's not easy, I mean you can manually save as a .pdf in a print dialog and thus supported by a @media print .css file.

However I assume you want it to perform the change automatically, sifting through ridiculously priced commercial software I've managed to find the following...

https://github.com/MrRio/jsPDF

By the looks of that, it should perform what you're looking for.

Raptus
  • 495
  • 4
  • 14
  • Do you know any way of reliably converting the HTML page into an image (or a set of images) so that it can be easily inserted into the pdf? – Manishearth Jul 02 '14 at 18:04
  • I just found a very interesting plugin @ http://wkhtmltopdf.org/ and it speaks of easily converting to .pdf and other image formats, might be worth looking into. – Raptus Jul 02 '14 at 19:17
  • Thanks, but it's in C :) I can't use that unless I emscripten it or something – Manishearth Jul 02 '14 at 23:28
  • Indeed there's a question like your's @ http://stackoverflow.com/questions/968201/convert-web-page-to-image the favourite is khtmltopdf, so i'd delve into it a bit more. – Raptus Jul 03 '14 at 08:40
  • @Manishearth Have you seen the last demo titled `** NEW: addHTML()` on [this page](http://mrrio.github.io/jsPDF/)? Doesn't it do what you want? – Antony Jul 20 '14 at 02:04
  • @Antony I hadn't, I was trying to build it from image. Thanks, will award the bounty when it lets me. – Manishearth Jul 20 '14 at 06:08
0

I have used the jsPDF JS library to generate PDF files in JS, but from your description I'm not sure if this is what you're looking for

Koen Peters
  • 12,798
  • 6
  • 36
  • 59