Updated solution to get screenshot as image file JavaScript/PHP - javascript

I need to save some html content - inside a div or the whole page - as an image file.
I have found and tested solutions, like html2canvas or the PHP 5 functions but my constraints are as following:
I have an MVC application architecture. That means that while I can easily generate an html file - then use tools to transform it into pdf etc. - it becomes cumbersome to add all the css files that the MVC framework does on the fly while the pages are built.
the html2canvas doesn't render some key html5 elements - video & audi controls, that I am intensively using. Otherwise it is a very good tool ...
the PHP 5 image functions are only running on Windows.
I've seen that the evolutions in this area are quite rapid, therefore I'd be grateful to have some lastest proven experience that you may have with this problem. Thx

Related

Research for a visual html editor which can export the changes or Finding a method for reapplying the user changes in initial html

I am looking for a visual HTML editor script that works in browser basically. Its initial content will be generated from an existing URL and all the changes which will be done by the user, should be exportable in some kind of format. The aim here is reaching the final look later by applying this exported data.
The user here will be non-technical end user. The editor can be similar to WYSIWYG so user can switch between preview and code. The editor should not rely on some kind of special CSS/JS frameworks, it should be able to read from CSS and JS files directly from URL while generating the page.
There are lots of visual editors out there with lots of cool stuff. Some are using drag-and-drop UI elements, some are meant to work just with Bootstrap etc. But so far I could not find something I can use.
So if existing tools are not enough, I need to find a way of generate same result by comparing the outputs.
Beside taking diff of the contents, is there any method for generating the exportable changes for reapplying to initial HTML later?
using diff may actually work but it may generate lots of bugs while working with js frameworks
If you are looking for what I think then.. https://ckeditor.com/ Check this one. I have used this HTML editor in a website. It changes the initial HTML and works like the way wordpress HTML editor works.

Using a script to split PDF, but not working with landscape PDF

I'm trying to find a solution to split PDFs I'm receiving in my email in order to start OCR (invoices).
The script is working well but only for 1-2pages document, so I tried to figure out how to manage multiple pages PDFs and decided to looking for a code to split big PDF into multiple PDF with one page...
I get this topic : Merge Multiple PDF's into one PDF
And tried something based on this script : link #pokyCoder (line 484)
Results are pretty good but the script is not working on landscape PDF with multiple pages. The script make every slide to portrait, and those are uncomplete to read then.
How could I get the script to work with landscape?
Or at least, how can I detect the layout orientation before the autostart?
Any help appreciated :)
I decided to do another way due to multiple version of PDF decoding/encoding and complexity to have uniform results...
I'm still using OCR, but not on very large document. And the result is handling by a buffer to avoid too big results at once

Embedding a multiple page pdf into a site with user ability to flip between pages + additional features

I am looking for some general advice on where to start with a project. I am working on a journal website which will display a handwritten journal with the ability to switch between a typed transcript version via a switch button. I am coding the website from scratch and working within php.
It will be around 70 pages long.
Have the ability to switch between the pages via arrows or by typing in a page number.
A switch that switches between the handwritten version and the typed transcript.
I have included some annotations of my designs below to give some more details of what I would like to achieve.
Is there some kind of framework available that allows for embedding multiple page pdf into a site that I can then work from to achieve the ability to switch between the handwritten and transcribed version
I am a bit stuck on where to start - I am more of a designer :)
Thanks for taking your time to read
Nina :)
The most common JS framework to embed PDF files in a webpage is pdf.js, you can find a demo here https://mozilla.github.io/pdf.js/web/viewer.html. I have not used pdf.js but I don't think it allows for editing the PDF content, like the style and fontface. So you could create 2 pdf files, a handwrittin and a plain pdf and just switch the viewed files around with a button, or try styling the pages in HTML/CSS and not PDF's. If you are not that experienced with CSS I would recommend the former.
Hope it helps.
Edit: I am not sure if a clickable popup is possible inside of a PDF, if this is an important feature, you may have to choose the HTML/CSS path instead of the PDF path.

Convert HTML + CSS to PDF with Javascript

I have an desing page(.cshtml) document that renders fine in all browser(FireFox, Chrome and IE). It uses fairly basic CSS to style it and renders fine in HTML.
I'm trying to convert it's one DIV to PDF, but I am facing issue like white spaces and page break. I have tried:
jsPDF : It had huge problems with HTML tables. I factored out my large tables and it helped but it makes a complete mess of tables and doesn't seem to get images. The tables were just break after page end. It doesn't print properly.
Windows Print : I also simply tried with windows print option in javascript, but it automatically takes the site logo image on every page of PDF and it get overlaped on data lines.
nReco : I also tried with nReco tool to convert HTML to PDF, but I am getting same output as above.
What am I missing, or how can I resolve this issue?
Try using html2pdf library as it is an easier to implement library. I have myself faced issues with jspdf and html2pdf has helped solve complex svg/grid related issues.

Interactively create PDF file from javascript generated html

I have a webpage with an interactive paged grid rendered using javascript. i.e. it's a grid that pulls in a number of rows at a time through MVC ajax call and have controls for going forward, backwards or jumping to a particular page. It is a fairly large grid (potentially millions of rows) and can display a number of different datasets. I would like to be able to generate a PDF containing a snapshot of each and every page from this dynamic grid. All the libraries I have looked at transfering html to pdf have all been static, anybody know of a good fast library to transfer interactive/dynamic javascript generated html to pdf? I am willing to do this at the server layer as well, if it is possible to import the .css skins used to create the grid on the webpage, to make the look similar.
I am not sure if that fits your needs, but I used
http://www.tcpdf.org/
some time ago, and it worked quite good. But no idea how good it works with javascript and stuff.
For the record I ended up using LocalReport From Microsoft.Reporting.WebForms.

Categories