I would like to have a link that when is clicked, automatically starts the download of the printable version of the web page.
I'm using Moodle. The content I want it's exactly the same If I download the page using ctrl + p and saving as pdf or using
Download web page
I want exactly that content because using this way, the header, sidebar and footer is removed. I don't want css.
I'm not using this because this doesn't work in some browsers.
I'd rather not using pdf libraries like tcpdf because Moodle loads the content in a dynamic way and send this to a libraries like that is a mess.
I tried using sites like pdfcrowd.com but this kind of sites don't work when the site you want to convert to pdf uses a server-side session to identify the user.
**There is easy ways to use jsPDF its very simple just you will use JSpdf Library **
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
function onClick() {
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.canvas.height = 72 * 11;
pdf.canvas.width = 72 * 8.5;
pdf.fromHTML(document.body);
pdf.save('test.pdf');
};
var element = document.getElementById("clickbind");
element.addEventListener("click", onClick);
I don't believe that there is a way to do this with window.print(). However, there are HTML to PDF converters available for free, and you could automatically start a download with that. An example of this would be jsPDF, a free library for converting HTML to a PDF with Javascript
Related
I'm trying to create a pdf for easy reference of jobs on google careers however when I try to create a PDF using wkhtmltopdf I'm getting a blank page.
I believe this has something to do with the html of the page itself? When I try to inspect the page source the html code is very short. There's also a few javascript links.
The URL I'm trying is this one
And here's the code I'm using:
pdfkit.from_url("https://careers.google.com/jobs/results/125555613246595782-partner-engineer-google-cloud/", 'test.pdf',
options={'--javascript-delay': 5000})
Using wkhtmltopdf like this also returns a blank pdf:
wkhtmltopdf https://careers.google.com/jobs/results/125555613246595782-partner-engineer-google-cloud/ test.pdf
Google used client-side rendering for this page.
This is an old link, but maybe it will be useful to you
https://github.com/devongovett/node-wkhtmltopdf/issues/70
I want to allow my users to save my page as a PDF. I have created a print stylesheet and I can generate the PDF by using Javascript's print function. Here's my problem:
In Chrome, the browser generates a preview and shows it to the user. The user can then either save it or print it.
However, in IE and FF, print calls up a complex menu, and while it can generate a PDF by "printing" to PDFCreator, it's a complex process that many users won't understand.
What I want to do is to somehow duplicate the Chrome functionality for non-Chrome users. Options I have considered:
Screenshot the HTML page and render that image into a PDF with Javascript. There are libraries that do this, but I want my PDF to have the print layout.
Generate the PDF on the server and send it to the user's browser. This can be done, but it seems difficult to use the same HTML as the standard page.
My server is running PHP and the Zend framework. I can't use NodeJS or any headless browser to render on the server. Do I have any options?
I've done exactly what you want to do before using a library called dompdf (https://github.com/dompdf/dompdf). Here is how I used it:
I dropped the dompdf library into the "library" folder in my ZF project. Then, in my application when I'm ready to render the page I created a new Zend_View() object and set it up with whatever view script variables it needed. Then I called the render() function and stored the rendered output into a variable I then provided to dompdf. The code looks like this:
$html = new Zend_View();
$html->setScriptPath(APPLICATION_PATH . '/views/scripts/action_name/');
$html->assign($data); //$data contains the view variables I wanted to populate.
$bodyText = $html->render('pdf_template.phtml');
require_once(APPLICATION_PATH."/../library/dompdf/dompdf_config.inc.php");
$dompdf = new DOMPDF();
$dompdf->load_html($bodyText);
// Now you can save the rendered pdf to a file or stream to the browser:
$dompdf->stream("sample.pdf");
// Save to file:
$dompdf->render();
$pdf = $dompdf->output();
file_put_contents($filename, $pdf);
I have a decodification problem.
I have an offline desktop application, where I have to generate a pdf file and save at his open.
To generate the PDF file I use BytescoutPDF library createpdf.js.
This returns a document variable that I have to save.
I tried with:
//this calls the createPDF to BytescoutPDF library
//and returns the variable into 'doc'
var doc = generaStaticPartBolla_2();
//take the stream
var bolla = Ti.Filesystem.getFileStream(billPath);
//open in write mode
bolla.open(Ti.Filesystem.MODE_WRITE);
//write the doc file decodified in Base 64
bolla.write(doc.getBase64Text());
//close the stream
bolla.close();
Now, the file generated is currupted.
I'm not able to open this. How can I do this? The file must be converted in Base 64 or other?
I don't know if you have solved your issue now, but I had the same requirements : offline app, generating pdf from HTML, and in my case, styling the generated pdf with CSS.
After trying many solutions, the main problem was to style with CSS.
Finally I used WkhtmlToPdf (http://wkhtmltopdf.org/). Basically I embed the binaries (for mac os and for windows) in the app, and regarding the platform, I execute them with the Ti.Process method.
WkhtmlToPdf generates a pdf in the specified path, so in this way, you will be able to open this pdf.
(In order to set the path for the pdf, i use openSaveAsDialog (http://tidesdk.multipart.net/docs/user-dev/generated/#!/api/Ti.UI.UserWindow-method-openFileChooserDialog) which allows the user to set the path and the name of the generated pdf).
Goal : A browser base pdf viewer that has zoom and drag/ pan function (better if allow hiding the save function) to replace the browser default one
Problem : all browser (exclude old IE) has their own build in pdf viewer, that without dragging/pan function
Currently this code use default pdf viewer:
<object id = 'zoomPage' type='application/pdf' data= '1.pdf'>
<p>The PDF can not display
</p>
</object>
Is it possible to force all browser (Chrome , FireFox , IE8+) using the adobe reader to open pdf file using javascript / jquery / html /php? Or are there any web base pdf viewer has the functions mentioned above?
Note:
For the first approach :
I found the way e.g.
content-disposition : attachment
but it only change the behavior from viewing to download the pdf , not changing the preference in opening the pdf file
For approach 2: (Which I recommend)
Check out:
https://github.com/mozilla/pdf.js/
PDF.js is Portable Document Format (PDF) viewer that is built with
HTML5.
PDF.js is community-driven and supported by Mozilla Labs. Our goal is
to create a general-purpose, web standards-based platform for parsing
and rendering PDFs.
EDIT: For your speed needs, check the discussion on the other options here: Recommended way to embed PDF in HTML? and see if the other options fit your requirements.
Approach 1 is inherently dicey due to security reasons
The only way you can force it client-side is by supplying the alternative...such as pdf.js, zoho, google pdf viewer, scribd, etc (there are many). I'm not sure if Adobe provides an in-browser pdf viewer like you're expecting.
The default pdf viewer is kept in a variable found in about:config that can only be changed by the user.
Is it possible to force all browser (Chrome , FireFox , IE8+) using
the adobe reader to open pdf file using javascript / jquery / html
/php?
You could try this by using an iframe pointing to the pdf file. The browser will automatically open the pdf file using a pdf reader software on client machine. Like this:
<iframe src="yourpdffile" style="width:100%;height:500px"></iframe>
you can't force something on the client for a security issue, but you can check with something like this. My previous sentence follows by the experience that I have on browsers and coding but maybe I can say something wrong.
You can control if there's Adobe Reader using javascript and a code that check if there is the Reader installed with a script like this (I've used these lines months ago and they work)
Try to use this plugin that maybe is for you pourpose (the first sentence link).
You can also use google docs viewer to achieve this functionality.
Just refer this link : https://docs.google.com/viewer
You can get the iframe url and put it in your site.
<iframe src="http://docs.google.com/viewer?url=http%3A%2F%2Fwww.yoursite.com%2Fpdf%2Ftest.pdf&embedded=true" width="600" height="780" style="border: none;"></iframe>
please note that the value of the url parameter in the src is url encoded.
Check out the JS Fiddle example here
I looked around and came up on http://code.google.com/p/jspdf
This is exactly what I need for a web app I am creating in jquery mobile, where users will be filling out a form from an iPad or whatnot (mobile), and be able to save as a PDF and I am able to pass in some variable that is a format of all the form fields, to make it look pretty and presentable as a document PDF that can be signed.
Now I was having problems with my phone testing jspdf, and apparently there is a workaround they provide and some people use saying to use jsPdf with downloadify. heres a link.
https://github.com/MrRio/jsPDF/wiki/Jspdf-using-downloadify
however when I use that link, it seems like I can only save it as a .txt ... am I missing something? How can i save it as a PDF? Just changing filename.txt to filename.pdf doesnt work because it says 'file type is not supported.' how is this using jspdf at all, it seems like it is only using downloadify and sending whatever contents to a TXT, not a pdf... anyone idea on how to successfully create a PDF using this method (with downloadify) because it seems using downloadify I can actually download the file to my mobile device. Without the downloadify method, no download is done.
You can embed the document in the HTML. Use js library at http://jspdf.com and the following code to embed a PDF on mobile devices, where #preview-pane is an iframe in your html.
var doc = new jsPDF();
doc.text(20, 20, 'Example PDF');
var string = doc.output('datauristring');
$('#preview-pane').attr('src', string);
I ended up not being able to do a clientside version, since I couldnt save the PDFs on the ipad. I ended up doing a serverside with PHP / FPDF.