I got a somewhat complex page I need to output to PDF format without forcing the user to use a print preview type screen to "Save as PDF". It's a Laravel web app that has a dedicated page formatted to be printed, but I need to generate a PDF without having to show the page. It uses bootstrap, css, a highcharts.js chart and a react component (already bundled).
Does anyone know of a way to turn this into a wysiwyg type PDF? I think I mainly need something that can take html, css, and js and be able to generate a PDF out of it but I haven't found anything.
Related
I would like to be able to display PowerPoint slides.
How should I implement this?
How did a website like Slideshare actually implement this?
When you upload a PowerPoint, Word, or PDF file, each page is displayed as a slide, each of which is a div and contains the image tag of that page with different qualities.
How can I do this with the front-end and back-end? (the back-end is with PHP).
Is there a library for it?
For Back-end you can use these libraries by PHPOffice
PHPWord for handling word documents.
PHPPresentation for handling presentation documents.
I've for the last month trying to add my react component into a pdf without showing it on the screen, with no luck.
I've exhausted everything I could find on SOF, such as HTML2Canvas which can't be used in my case since the component have to be rendered before one can convert it to canvas and add it.
It does not have to be in the client.
Have you seen the print media query in CSS?
You can do
#media print {
/* Your CSS */
}
You can use this to hide a component with CSS on the normal page but then when it comes to printing you can make that component visible. The component will always need to be on the DOM though.
If you're just trying to have users print your page to pdf using the print dialog, then GavinHenderson5's answer should be sufficient. If you need to actually produce a PDF file that users can download, then a combination of GavinHenderson5's solution with something like Headless Chrome may be preferable.
We have a backend endpoint setup that has a running Chrome instance that then calls a URL on the frontend (rendered React components) printing it to PDF. Using print media queries, you can double dip any styling of the components or display: none/block; if you want to pick and choose for the rendering.
Is there a way to implement functionality so that a user can Right click a subsection of an Html page (say a DIV or other container element) so that that part can be saved as an image/pdf (using javascript)?
Alternatively (ideally) can this be done on the server side in ASP.NET?
The use case for this is the following:
I have some complex web pages generated in asp.NET and using the javscript Flot library for the graphs. I would like to reuse part of the html page to generate PDF reports or at least image snapshots which can easily be inserted into reports. I have looked around and it seems there is a tool wkhmltopdf which converts the entire page to PDF, however there are 2 issues:
This tool needs to be run separately, which is not friendly for end users
The tool extracts everything on the page, e.g. menus headers , footers etc.
For the second problem I could generate web pages without the headers/footers and menus, and then use the tool, but this does not solve problem 1. Ideally I would like to generate the report weekly and automatically so the user only needs to download it.
For this purpose what is really needed is some way to store as pdf or image a DIV (or other element) referenced by id. This way I would not need to write separate code to generate the reports. I realize there will be a loss of quality converting html to PDF, but for our purposes, this is not that important.
IECapt# is a new and experimental version of IECapt written in C# to render a web page into a BMP, JPEG or PNG image file.
see http://iecapt.sourceforge.net/
You will have to make some calculations, if you want to crop the captured image to your requirements, or give the tool the html u actually want as an image,instead of the whole page.
Hope this helps.
In case this can help others, I finally settled for the iTextSharp library which is very powerful and also handles svg. It does not do the general html5 to pdf dump but with a bit of code I can do most of what I need.
main website is:
http://itextpdf.com/
download:
http://sourceforge.net/projects/itextsharp/
I'm looking to add a degree of interactivity to a set of PDF files that I have, and would like to embed a PDF document in a webpage, and then overlay touch targets to I can make a popop over them.
What would be the best way to make this happen? I briefly looked into Mozilla's pdf.js, but thats more focused on being a full on PDF reader, and has sluggish performance on tablets.
Are there any reliable PDF to HTML libraries/converters that could help me out? The PDF's are fairly basic. More or less just a bunch of images (which are individually selectable in the PDF) in a grid.
At the moment I am opening the PDF in Photoshop, slicing it up, and then exporting it as an HTML table, but I would love something a bit easier to do
I don't see a way around a server-side solution. Here is how I would do it in PHP using ImageMagick:
<?php
$someFile = $_GET['pdf'];
try
{
// Saving every page of a PDF separately as a JPG thumbnail
$images = new Imagick($someFile);
foreach($images as $i=>$image) {
$desiredWidth = 1024;
$image->thumbnailImage($desiredWidth,0);
// Save the file to disk
//$image->writeImage("page".$i.".jpg");
// Or display it from this script:
header('Content-Type: image/jpg');
echo $image;
}
$images->clear();
}
catch(Exception $e)
{
echo $e->getMessage();
}
?>
If your PDF is a single page then that script will just create a single file or if you echo the $image then it will just display that page as a JPG (or PNG or whatever you want). Then you can mark up your HTML around it as needed by including the script as an IMG:
<img src="myscript.php?pdf=somefile.pdf"/>
Now you can have whatever HTML you want over and around the PDF as an image.
I've implemented a commercial solution called PDFWebViewer.NET to view PDFs in the browser a couple of years ago. It uses server side image rendering (.NET) and nothing but HTML and javascript client side.
I think that's as close as you can get to viewing PDF in the browser without any plugins. Since it's all HTML you can overlay pages with divs and hook up actions to that using javascript. In fact, that's how the product renders out links in the PDF documents.
This works really well because by using relative positioning you can make sure the links stay in the right place while panning the document.
The project was recently open sourced but still relies on commercial components. It should not be a lot of work to replace that with open source PDF components.
The project is hosted on codeplex. PDFWebViewer 1 is the first generation, WebViewer 2 is the latest version.
I would advice you to use wkhtmltopdf. It allow you to work bassically with any web content whitch is on the fly converted to pdf format by taking a "snapshot of screen" (simple explanation). For example you can write your own html template just like you would on any website and than populate it with custom data. You can use it generate for example an invoice. Im using it for couple months now and without any single problem.
Its simple shell utility to convert html to pdf using the webkit rendering engine, and qt. And of cource its open source!
Example:
wkhtmltopdf www.myhomepage.com myhomepage.pdf
I have created a graphics using jquery. and i want to convert this web page to pdf or an image. Which one is simpler? but when I convert this page to pdf that graphic will not shows. can any help me to solve this problem??? please refer some code.
JavaScript is interpreted by the browser, not by the HTML -> PDF application. I'd recommend using wkhtmltopdf, as it uses Webkit to render, so maybe that would fix your problem.
To try to render the page that includes JavaScript, fire up Google Chrome (or another browser with a DOM Inspector of sorts), open your webpage, right click and select Inspect Element, right click , click Edit as HTML, and copy & paste the HTML into a new text document, save it, and use that instead to convert to a graphics.
You have to go through a complicated process like this because that application that your are using renders only HTML + CSS, and doesn't even parse the JS. The DOM inspector shows the HTML pages as it currently looks, not when it was loaded.
I hope I didn't make it too complicated...