I am trying to achieve webpage to PDF conversion using html2pdf library in javascript but content is cut in half when documents are longer than 1 page and elements like e.g. images happen to be between pages. How can I get them to the other page if they don't fully fit within the previous PDF page?
Related
My task requires me to click a button on the webpage and download the data as a pdf file. Simply printing the webpage wont do as there are certain tabs which are visible only upon selection.The data source is readily available on the pagenameVM.js. I tried using jsPDF but that works only for a certain div in the page.I need to write the all the required data into the pdf and then download it.
Is it possible?
It's possible to position a PDF onto a certain page by adding the fragment identifier
#page=N
to the URL (at least in Chromium and Firefox).
Is there any way to position by half pages? For example, something like: #page=1.5.
For doing scrolling, this should do it. It's a bit of jQuery. You could include your PDF with an iframe and and change ´$("body")´ to your iframe selector.
$(function() {
var fragment = window.location.hash.split("=");
if (fragment[0] == "#page") {
$("body").scrollTop($(window).height() * fragment[1]);
}
});
For displaying PDF files in the browser, it may be easier to convert/rasterise the file to an image then just display part of the image required. This way you have much more control of the image rather than trying to manipulate the PDF (plugin or other PDF rendering).
Is it possible to embed code inside a PDF document ?
I'm interested in creating a PDF document with a dynamic image,
so once a user will open the PDF in a certain time he will get to see image 1 and on a different time he will get to see image 2
(both images source will be on the web and will require HTTP transfer).
Looks like it is possible but it does not seem trivial:
PDF with dynamic image
I would like to embed a PDF in a webpage. When a user clicks on a certain coordinate within the embedded PDF, I would like to know what coordinate it corresponds to with respect to the PDF (and not the browser window). I will then plan on inserting text into the PDF server side so that a user can click on a portion of a PDF and add text to it through the webpage.
Does anybody know of any JS or other solutions to do this? I am using Django for the website.
I have come across html2canvas thanks to a previous question of mine. What I am confused about is how could I implement it to do the following:
Create a live thumbnail of a live website.
When the live thumbnail is clicked it loads a bigger image of the website.
What would be the best way to feed the uri's into the script?
All images will have specific hxw set in the image tag or the css for the specific class.
If the website you are trying to create a thumbnail for is different from the actual page the user is on, you'll need to first download the HTML of the page to your server (same origin), after which you can wrap it inside an iframe and create a screenshot of that.
The screenshot generated will be 1:1 size with the actual site, so to create a thumbnail you'd have to resize the screenshot.
The script doesn't accept HTML, url's or anything else except for DOM elements as an input for rendering a page. As such, the only way you can generate a screenshot using the script is to have it either load on the page where you want the screenshot to be generated or load the page within an iframe (under same origin, so you'll need to download the source through a proxy if you use cross-origin).