PDF download button - javascript

i am making a CV generator, and i need help. I am making a button, which will generate the CV as pdf and make it downloadable. Is there any way i can do it in HTML and CSS, not js and jquery?
<h3>Download PDF<i class="icon-feather-check"></i></h3>

No, there is no HTML/CSS only way to actually generate a PDF.
However, you could use a print stylesheet (media print - see https://developer.mozilla.org/de/docs/Web/CSS/#media) and set your links href to javascript:window.print(); to make it open the print dialog.
The user could use the "print to pdf" function (if the users PC offered that) to generate a PDF from the print view, but thats the closest youll get to actually generate a PDF in pure HTML/CSS i believe.

Related

Display pdf document on website (mobile friendly) with vue.js

I'm working with vue.js, and I want to display a pdf on a website. I keep seeing a lot of complicated examples of pdf viewers that require an upload button and a conditional display - this is NOT what I need.
I just need to display a hardcoded pdf document within a div on my web page.
This is what I have so far using iframe
I need the width of the actual pdf page to fill up 100% of the width (for legibility). I don't want the grey background to show. The page should also be mobile friendly.
Open to suggestions that include not using iframe, especially if it would make the page more mobile friendly. If you're going to bring up vue-pdf or PDF.js, please include some clear instructions on how to use them.
PS: I am using some parameters to remove the toolbar and navpanes like so:
src="<MY PDF HERE>.pdf#toolbar=0&navpanes=0&scrollbar=1"
I've tried adding &zoom=100 or &view=Fit and that does not fix my problem.
Here is a list of all the parameters.
I lied. Adding &zoom=140 to the end of my pdf url solved my issue.

Print PDF.JS without print btn

I can see a pdf.js document in a digital viewer. Is it possible to print it without seeing a print button or the hotkey?
If I print with the browser function of printing, its just that one page, that I see.
I need it without the whole border stuff, just like the pdf and every page, not just what I see.
If I could have access to the original pdf somehow, this would be fine too.
Extension in FFox enabled right click again and then I could print the iframe to pdf

Google Chrome PDF Viewer API

I do have a pdf embeded in to the page. It does work and it has it's own buttons, like print, download, rotate, zoom-in, zoom-out.
Is it possible to control these buttons from javascript? I want to show the pdf, but the buttons for download and print I want to control by myslef, with different design and placements outside of the embeded element.
TO sum up, I want to hide all buttons which is shown to the user from the default pdf viewer, except the page number, and I want to separately create donwload and print button with my own design but with the same functionality.
I've done a little bit of research and I found this: https://bugs.chromium.org/p/chromium/issues/detail?id=135146
which is yet has unknown status. Does it mean the API for Chrome pdf viewer doesnt exist? I couldnt fine any.
Another solution is to integrate PDF.js in my own web app, which is heavy (almost 2.6mb zipped) and time consuming.
Any idea is welcome.

JavaScript Print PDF using Adobe toolbar

I am trying to print a PDF in an iFrame. I have a print button for the user to click. I am finding it hard to write JavaScript to print the PDF that will work across IE, Chrome, Firefox. It's been really hard to print PDF, in an Iframe, in particular on IE.
While working on this, I noticed a toolbar for saving and printing the PDF when hovered over the PDF. I think these features are offered by Adobe.
I would like to know if there is a way to access these Adobe PDF controls through JavaScript.
How can I fire them using the print button?

How to display a pdf file on tool tip using jquery

I have a link as:
PDF
I want to set a tooltip for this link and in tooltip display the same pdf file.
That means i want to display the contents of testpdf.pdf file in tooltip when mouse over the link.
I searched that for in google, but there have no link siutable for me.
There have a lot of model for image ,text in tooltip.
How can I do this?
Anyboady have any solution?
Displaying a PDF generally involves launching a browser plugin, such as Adobe Reader, which has its own menu bar, toolbar, and so on. Cramming that into a small space like a tooltip probably isn't very practical.
You'd be better off rendering a thumbnail image — maybe use a PDF library on the server for this — and showing that in the tooltip.
You can try pdf.js
It renders PDF files onto canvas..
But in my opinion it is not a good solution at all, when the PDF is big, it will take some time to load it into the tooltip..Better is to create a thumbnail on the server and display it as a standard image..
Here is how to do that with PHP
I think that requires the browser to have a plugin to display PDF inline instead of downloading it. Once this is ensured, you can set the target of your tooltip to the URL pointing to PDF. What tooltip library are you using, btw?

Categories