Explore JavaScript methods for producing PDF of Content Interface (again)

[djplaner]

Maybe even a web component that can be easily added?

jsPDF

As per StackOverflow in theory it's possible with jsPDF and including

• jspdf.js
• jspdf.plugin.from_html.js
• jspdf.plugin.split_text_to_size.js
• jspdf.plugin.standard_fonts_metrics.js

BUT It you lose all the style information.

jsPDF and html2canvas

html2canvas apparently uses the browser to generate a canvas image. Possibly keeping the styles, but probably generating a PDF with images, not text?

PDFReactor

An API based service. Have to pay to get a real licence. But seems very full features.

PDFMake which is based on PDFKit

PDFKit is very low level for PDF generation - Browser or server (node)

PDFMake takes a doc definition as JSON array - not as html.

Some early work on HTML to PDF, and someone wrote a html-to-pdf module.

BUT

• requires that images be already in base64 format, so not an option

[djplaner]

Print HTML

StackOverflow post suggestion works

1. Open new window
2. Insert HTML from div into there
3. Add some additional CSS
4. Print that window "to PDF"

Doing it safely across browser might be the main difficulty.

Do Javascript conversion of HTML

Not only can you add CSS, but you should be able to run Javascript on the HTML from the div to do all the changes currently done in Python.

To do

• [x] Document the changes to HTML done in python and confirm can be done in Javascript
• [x] Modify content.js to allow parameter to add a Print button
• [x] Add the event handler to do the print
• [x] Modify it to do a better job
• [x] Finalise it

[djplaner]

General set up tasks

• [x] Modify parameter to all specificiation of a URL for the print CSS
• [x] Change the title of the page from "DIV Contents" to something meaningful
• [x] copy the COM14_print CSS to aws
• [ ] Eventually update COM14 to use this approach to print
• [x] Test this with a default Content Interface
• [x] Stop the reloading of the page (without Bb parameters) after closing the print window

convertLib::processHtml

Takes title and HTML and does the following changes

• [x] Remove the aaccordion-expand-holder element
• [x] Remove mark reviewed buttons
• [x] Remove the mark reviewed label
• [x] How to handle the Reading/Activity/filmWatchingOptions styles where images are in the background and thus may not print nicely - how was it down with Canary Exercise Not working include
  • [x] note - on all
  • [x] Film Watch Option on Chrom
• [x] Extract all the links in the document
  • [x] Modify the Blackboard links to add BASE_URL
  • [x] Generate a list of all external URL
  • [x] The Blackboard Content Link styles aren't being converted (only when not converted in the online version)
• [x] Remove blaed in Blackboard links with
• [x] Get all the embeds
  • [x] Convert them all to different styles - especially videos
    • [x] make this all a bit smarter to handle iframes nested in other HTML
  • [x] Add in support for vimeo embeds
  • [ ] Add support for a error style in the CSS
  • [x] Ask team for list of common embeds and support them
    • [x] Soundcloud - example
    • [x] Powerpoint - example
• [x] add list of links to the end of the document (or the beginning)??
• [ ] In text links (activity and in body) aren't working as links - *%$&^ Firefox
• [ ] Formatting of PDF
  • [ ] Can the header/footer of the PDFs generated be more style specific? (currently URL and title, very ugly text)
  • [ ] What about colour shading for Examples (and other styles), currently indented, but not shaded?
  • [ ] Styling of footnotes could be improved
  • [x] add a print style sheet to the original Content Interface, not the print window
  • [x] Does this help Chrome print with styles?
  • [ ] Add the course code to the title of the page or the file?

[djplaner]

Status

Working on style images. They can't be printed because they are background images. Implying that the STYLE_PREPEND stuff doens't need to happen normally, could be moved just to the print stage

[djplaner]

PDF generation

PDFs being generated have links that can't be clicked on.

Apparently printing to PDF (printer) is the same as printing on a printer. The PDF is flattened, i.e. links are visually displayed, but don't actually work as links. This is from Acrobat.

Appears that Firefox does the same. Chrome generates clickable links, however, styles appear to break.

Formatting for print - a tale of two browsers

Currently code adds a "print" css to the main document, that works in chrome. But not in Firefox.

Remove it and it works in Firefox but not in Chrome

Both screen and print work in Firefox Chrome

• Screen only doesn't work
• No CSS doesn't work
• print doesn't work

But only in the pop-up window. Load that same HTML page into a proper window (the original that works in Firefox) and it all works.

Suggestion Is it having a print css in the original that makes the difference? Yes. Chrome needs the print css in the original. Firefox doesn't. But have it and a screen one in the popup and both are happy.

Advanced features

This page has some details on

• paged media
• emulatig print

And a similar page

[djplaner]

Alternate to image background in CSS

1. Activity, Reading, FilmWatchOptions etc all use background image CSS to locate and control the size of the relevant icons
2. But CSS background images don't print (though apparently can force on webkit browsers)

STYLE_PREPEND has to happen for all of these because Mammoth can't do it alone. Thus move away from using background images

• [x] All the CSS files
• [x] No need to use STYLE_PREPEND before print

[djplaner]

Missing film watch options icon

For some reason, Chrome doesn't like displaying the Film Watch Options icon, but it can be iconsisstent.

Fixed. Problem with my code

Kitchen sink test - note icon is huge

Appears fine elsewhere. Fixed my code.

[djplaner]

Adding course code and title to the header

• [x] Get the course code and title from the HTML page
• [x] Add it into the print version
• [x] Style the header of the print version to be nice (Challenge doesn't seem to be a good clean way to do this at the moment)

[djplaner]

=== COM14 issues

Week 13 of COM14 isn't printing?? Forms embed?

Week 1 embed stream isn't being converted

Also some issues with activity icons