Convert HTML + CSS to PDF with Javascript - 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.

Related

How to add URLs to work as clickable links in react-pdf

I am generating a pdf using react-pdf library.
Everything seems to be working fine but I can't make the Link element from #react-pdf/renderer to work properly.
const add_hyperlink = (url_text: string) => {
return <Text><Link src={url_text}>{url_text}</Link></Text>;
};
In the pdf document, it appears as a link should and even the pointer changes on hover, on clicking the link, in chrome nothing happens, while in adobe reader, it results in a security block.
I tried to use an <a> tag instead, but it resulted in the same output.
Does someone know how to resolve this? Thanks.
EDIT:
Something I realized while researching on this. Noting down because it is easy to get confused with the tiny differences.
library #react-pdf/renderer is used to create pdfs in react.
library react-pdf is used to display existing pdf in a react app.
There were several mentions about using annotation options and including "import 'react-pdf/dist/Page/AnnotationLayer.css';" which made links appear properly for many developers. However this belongs to react-pdf library and will only work if it is needed to render pdf within the react-app.
In this case, I am creating a new PDF with #react-pdf/renderer but I am generating a link to download the generated PDF file (https://react-pdf.org/advanced#on-the-fly-rendering).
I found the solution to my problem as well.
The link I was using is supposed to redirect to another url, and hence the problem. I used the final link in src and then it works smooth.
I hope these observations are of help to someone in the future :)

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

How to split a long article(with formats or images) into pages like Microsoft Word?

Here's my problem:
I'm working on a project on which the customers can post their articles.However,sence the article can be very long,and I need this articles showed on pads(like ipad or surface). So I need to split the article into small pieces and put them into different .html files. Each file has a body with style of width:1024px;height:768px like ipad2.
I want the artilces splited automatic, like the Microsoft Word. When a line is too high for the current page to contain,it will be put into the next page.
I think it is hard to split it on the server side like PHP, so I tried to finish it in the browser using CSS3 and JS.
I tried tinymce and fckeditor and so on,but the problem is still there.
I need your help. Thank you so much.

How Can I export a JavaScript Generated HTML Table to Excel?

I really shot myself in the foot this time. I'm using JavaScript to build an HTML table on one of my pages. I got everything to work fine but I can't copy this table into Excel like a normal HTML table.
I'm pretty sure it has to do with the fact it's a JS-generated table (using d3.js specifically) as when you look at the page source in the web browser, the table is obviously not there except for the few bits that were hard coded into HTML.
My problem is, I need to work with this data in Excel. I use to build these tables using PHP and that was fine but someone suggested I migrate to d3.js and didn't realize I would run into this problem. For example, if I select the entire table and copy/paste special into Excel in any way it dumps it all into one cell instead of parsing it properly.
I'm kind of stuck in a time crunch to get this data out of the browser and into Excel so rewriting my web page isn't an option.
Idea?

How to Paginate Footnotes Properly in CSS & HTML (Print Media)

Is there a way to get footnotes to work properly, i.e. with a dynamic footnote region size and each page having only the footnotes for that page, when using the #media print mode of CSS3 with (X)HTML? Or can you point me to a Javascript recipe for achieving something like this?
I have found a solution for this problem by working in an entirely different direction. Thankfully, I was already producing the XHTML from XML with an XSLT transform. I wrote another transform file, that went to (believe it or not) XeLaTeX; I wrote a Python script to apply the transform, then called it from a Bash build script (which had to use tail to hack off the first line, which is an XML declaration illegal in XeLaTeX) and then does two passes of compilation to produce the final PDF document with properly paginated footnotes
There are a number of JavaScript libraries that do pagination (leveraging CSS, of course):
Pajinate
jQuery Pagination Plugin
jPages
jQuery Paging Plugin
I have not yet had time to look into them, but they might get you started.

Categories