Is there any way I can direct display PDF files in modal boxes?
I am using CodeIgniter PHP framework and jQuery as JavaScript framework.
UPDATE: I read on net that this is possible by loading it in iframe, and Adobe PDF will render it, but many seems to oppose, so is there any way I can convert those PDFs to images?
Short answer: No.
Longer answer: Usually, PDF documents are not rendered by the browser directly, but rather by some specialized PDF reader. As soon as the browser sees a content type of application/pdf, it passes the response along to the reader. Nothing you would do in your HTTP headers, HTML or JavaScript would make it across the gap between the browser and that other program, and the PDF format itself contains no switch to enable any kind of modal user interface.
Update: Rendering the PDF as an image would allow you to display the graphical content of the document in a more modal fashion. You still are not able to block the user from closing the browser, but you would be able to "lock down" anything else on your page while the image is displayed.
Related: How do I convert a PDF document to a preview image in PHP?
If you really want to, you can just embed it as a normal object. For example:
<object type="application/pdf" data="embeddedfile.pdf" width="500" height="650">
That's a bad idea. Always let the user set their browser to how they want to handle PDF files. So just create a link to the pdf. Modal windows aren't for that purpose anyway.
Related
I am working on content oriented website and using I frames to display pdf.when I am opening that page in the mobile browser it starts automatically starts downloading the pdf,how could I display pdf file using iframe in browser instead of downloading.
Now i am thinking to convert pdf's into HTML and pass HTML file as source in frame.
Suggest me some other alternative if I'm wrong and if I'm right then suggested me some pdf to HTML convertors,which can convert in bulk as I have very large number of files.
**EDIT:**thanks,it worked but can how can i stop it from being download,i'm thinking of disabling right click,will it work
One thing you can do is to upload your PDF somewhere and just use its URL.
You can also use Google PDF viewer for this purpose.
For more information check this Recommended way to embed PDF in HTML?
There are many ways you can make this possible one of them would be use the following <embed> element with source link to your pdf file :
<embed src="http://example.com/yourfile.pdf" width="1000" height="500" type='application/pdf'>
Another one is you can use the javascript library also :
pdf.js
and one last i have in mind is you can use google docs api url to view the : docx,doc,xls,pdf,ppt or any other document file online by using the method below:
https://docs.google.com/viewer?url=http://example.com/yourfile.pdf
I have a HTML page that contains a table with a list of a customers orders (pulled from a database via PHP).
I want to have a button on the page that will allow the users to download a PDF copy excluding the navigation bar etc.
The examples that I've seen and tested online initially load the page in PDF format but I don't want this. I want it to load as it currently is but also have a button that when pressed downloads a PDF copy (i.e. not display it in the browser).
wkhtmltopdf will do the trick:
http://wkhtmltopdf.org/
It should allow you a lot of customization options.
But if you want to generate it dynamically then you have to use some library for pdf . There are many library like tcpdf, dompdf etc.
Dom pdf example
From experience I would recommend Phantom JS - see an example
I found Phantom JS offers better HTML/CSS support when compared to wkhtmltopdf.
Bear in mind, you will struggle to get support for things like CSS3 columns in Phantom and Wkhtmltopdf.
Workflow:
Land on initial page (later to be converted to PDF).
Display button - 'download as PDF'
Listen for the click event on this button and call a custom callback
function once the event is fired.
The callback function executes an Ajax call sending the full page
HTML as part of the server request.
On server side, fire up Phantom JS or Wkhtmltopdf to generate PDF. Save
PDF on server.
Generate URL for saved PDF and display/load client side.
PS; I'm not sure if Phantom JS will generate a PDF from a string or whether it expects a valid url. I know Wkhtmltopdf can generate a PDF from a string.
Hope this helps
Since you ask for the easiest way.. just print the HTML client side. This button invokes printing the web page client side:
<input type="button"
onClick="window.print()"
value="Print This Page"/>
Then the user would have to select a PDF printer driver. Chrome has this built in.
Here you can read how to exclude parts of the HTML (such as the print button itself) from being printed:
How do I hide an element when printing a web page?
I am trying to make an image editor kind of page. Person can add text and styles to the background image. Everything i have done through HTML, Jquery and css, but struck up with export it to an image. I want to convert the particular div into image.
Note: I already know HTML to image conversion is possible through SVG and HTML5 Canvas. I cannot do those things because of browser compatibility.
If any PHP classes or jquery plugin is available please help me.
I think it is not possible without HTML5 features on the client side directly. May be I wrong?
My solution is to send the entire div (with styles) to backend server, where capture a screenshot with PhantomJS or Qt Webkit. On the server side you shoold open the DIV user created as it displayed in user browser and then make screenshot of this DIV.
I am using output buffering to grab a pdf file from a network share via PHP using a proxy-handler and readfile().
I display this in a new browser tab by specifying the content/mime type.
(http://stackoverflow.com/questions/10121903/php-scandir-explorer-view-to-display-network-share-files-file-via-wamp-wor)
I use jQuery / Ajax throughout the rest of the application.
Is it possible to inject the raw PDF content into a div tag using ajax but get it to display correctly? Currently the required header (header("Content-type: application/pdf")) seems to be stripped by the ajax request and it is displaying jibberish.
Edit: Thankyou all for the comments and answers. I will respond in more detail and review my options shortly.
# Murtaza - the question link above shows how I got to the raw PDF, in addition I have used $.ajax to send the request to the div tag and used an iframe which sort of worked when I rendered it into the code as src=, rather than Ajax.
# Brad Christie / Quentin - Perhaps I could use an iFrame or Modal to display the content? I have tested pdfobject.js which is good but requires a linked file (e.g. /files/file.pdf). It sounds horrific but what if I use PHP to write a temporary file to the web root and then display? The only other thing I can think could be useful might be the jQuery PDF library if anyone has used it?
# Ignacio - I did try this with the following code. It rendered the jibberish. I'm probably doing it wrong as I have no experience with iFrames.
// Where $filename is the raw PDF data
">
James.
You can't "inject the raw PDF content into a div tag"; the PDF file is not HTML and must go through a PDF reader plugin. Try making it the target of a iframe instead.
Is it possible to inject the raw PDF content into a div tag using ajax but get it to display correctly?
Not really. You might be able to make something of pdf.js though.
Currently the required header (header("Content-type: application/pdf")) seems to be stripped by the ajax request
Whatever means you are using to insert the data is explicitly treating it as text or HTML, not as a PDF. It is your your code is ignoring the content-type.
How should i create a preview of image to be uploaded before it is actually submitted using AJAX in PHP?
Without uploading the image, this is going to be impossible in JavaScript as far as I can see, because security limitations are going to prevent you from determining the selected file in the file upload, and embedding that file in an img tag (as it used to be possible five years ago.)
You will be more lucky with Flash-based uploaders. I have seen some that offer the kind of functionality you want.
Update: Here's one that offers a preview function. From what I can see, it base64 encodes the local image and serves it to the surrounding HTML page as a inline data <img> tag. This is great because it might integrate well into your site. It does not work with any version of Internet Explorer, though.
Here's a fully Flash based solution that does previews in all browsers.
you first have to upload the document to server. Than you can show like.
<img src="uploads/file1_12224.jpg" />
The "file" input type doesn't expose the local file location of the file to be uploaded. It does "appear" to because as a user you can see the location, but the web page never knows this value. Without the local file address, you can't show a preview of the image on the web page using plain HTML or JavaScript.