i want to display pdf files in my website but unfortunately it will automatically download by idm.
here's my code:
$
<div class="viewerthesispdf">
<div id="viewer" class="pdf-viewer" data-url="<?php the_field('upload_pdfACField'); ?>"></div>
data-url is used to embed a file in a web page. That makes sense for images. It doesn't make sense for a PDF (or Excel or Word or most other file types) because normally these types of files are in place of a page, not a section of a web page. There are generally two solutions, depending on whether the files need to be restricted:
Use an href tag to reference the file. Download File1 I usually include target="_blank" in order to force a new page so that if there is a problem with the download you don't "lose" the original page, but it isn't strictly necessary. This will simply give a link to the file - and you can use a button, Font Awesome, images, etc. to make it fancier - but in the end "a link to a file".
Create a form which returns only the PDF as a result. Again I usually include target="_blank". The advantage of a form is that (a) the file doesn't have to actually exist on disk - it can be created by a script on-the-fly (technically this can be done with a link too - but typically a link would be a file rather than a script) and (b) you can include any necessary parameters for security, user-specific customization, etc. as part of the form. The form can use a GET or a POST depending on your preference.
Use href to show your pdf file list like this Filename , it will not start downloading automatically, only when user click on it, it will start download.
Related
I have to create a online time-table for the school. The part what is troubling me at the moment is not to be able to download a file by clicking on the filename.
I try to download a file by clicking on a button or a link with html/php maybe javascript but for javascript I should somehow combine php and javascript because javascript has no readfile-function.
Some of my attempts:
Download
This just shows the content of the file in the web browser but I am not able to download it. The content of my testmove.txt is testmove123, so I just see the text testmove123 in my browser.
Another example:
Javascript:
function download(file)
{
window.location=file;
}
+html:
<input type="button" value="Download" onClick="download('dateiupload/testmove.txt')" >
Makes the same.
Another example:
Javascript:
function download(path)
{
var ifrm = document.getElementById("frame");
ifrm.src = path;
}
+html:
<iframe id="frame" style="display:none"></iframe>
download
By clicking on "Download" the javascript function starts but nothing else happens and I see the same site.
Another example (with php):
Javascript:
function download(path)
{
var ifrm = document.getElementById(frame);
ifrm.src = "download.php?path="+path;
}
+html (same as above):
<iframe id="frame" style="display:none"></iframe>
download
+php (the reason my its more or less working):
header("Content-Type: application/octet-stream");
header("Content-Disposition: attachment; filename=".$_GET['path']);
readfile($_GET['path']);
This solution doesn't wait for a click from me and starts the download by starting the site.
A working solution I thought about would be to link to another site where the download automatically starts but its absolutely not how it have to be. I use $_POST variables on the site and I lose them when I leave the site and I can't come back after the download.
It must start the download by clicking on the filename.
You can download straight from the anchor tag by using the 'download' attribute.
<a href="dateiupload/testmove.txt" download>Download</a>
The filename of the downloaded file will be testmove.txt by default.
You can change the filename like this.
Download
More Details at w3Schools
You were correct to use those headers - as you can see, the file is being downloaded. The only problem now is to have it download when you want it to.
For a very simple solution, I would suggest setting up a download.php file that will be the page you download all files from. You would setup a GET parameter for this file and the URL would look something like this:
http://your-cool-site.com/download.php?filename=textmove.txt
Now inside download.php, you'll read that GET parameter which will be a filename, and then pass it eventually to the readfile function. This is the stage that you should think about enforcing some level of security as passing a path directly to the function could give people access to files that they shouldn't be looking at! Think about limiting the actual downloadable files to a limited selection of files or paths you know to be "safe" for people to download.
You'll also need to use the file name in the headers (and possibly even the size of the file to support displaying progress of the download).
Once you have this download.php file ready, you can place links to it from other pages in a very similar way that you have now:
Download File
Clicking on this link will make the request to download.php and when it gets the appropriate headers, the download will start.
in my webpage you can read book in pdf format. The problem is that some books have around 1000 pages and the PDF is really big so even if the user reads just 10 pages the server download the full pdf, so this is awful for my hosting account because I have a transfer limit.
What could I do to display the pdf without load the full PDF.
I use pdf.js
Greetings.
ORIGINAL POST:
PDF files are designed in a way that forces the client side to download the whole file just to get the first page.
The last line of the PDF file tells the PDF reader where the root dictionary for the PDF file is located (the root dictionary tells the reader about the page catalog - order of pages - and other data used by the reader).
So, as you can see, the limitations of the PDF design require that you use a server side solution that will create a new PDF with only the page(s) you want to display.
The best solution (in my opinion) is to create a "reader" page (as opposed to a download page) that requests a specific page from the server and allows the user to advance page by page (using AJAX).
The server will need to create a new PDF (file or stream) that contains only the requested page and return it to the reader.
if you are running your server with Ruby (ruby on rails), you can use the combine_pdf gem to load the pdf and send just one page...
You can define a controller method that will look something like this:
def get_page
# read the book
book = CombinePDF.parse IO.read("book.pdf")
# create empty PDF
pdf_with_one_page = CombinePDF.new
# add the page you want
# notice that the pages array is indexed from 0,
# so an adjustment to user input is needed...
pdf_with_one_page << book.pages[ params[:page_number] - 1 ]
# no need to create a file, just stream the data to the client.
send_data pdf_with_one_page.to_pdf, type: 'application/pdf', disposition: 'inline'
end
if you are running PHP or node.js, you will need to find a different server-side solution.
Good luck!
EDIT:
I was looking over the PDF.js project (which looks very nice) and notice the limited support statement for Safari:
"Safari (desktop and mobile) lacks a number of features or has defects, e.g. in typed arrays or HTTP range requests"...
I understand from this statement that on some browsers you can manage a client-side solution based on the HTTP Byte Serving protocol.
This will NOT work with all browsers, but it will keep you from having to use a server-side solution.
I couldn't find the documentation for the PDF.js feature (maybe it defaults to ranges and you just need to set the range...?), but I would go with a server-side solution that I know to work on all browsers.
EDIT 2:
Ignore Edit 1, as iPDFdev pointed out (thank you iPDFdev), this requires a special layout of the PDF file and will not resolve the issue of the browser downloading the whole file.
You can take following approach governed by functionality
Add configuration (i.e. kind of flag) whether you want to display entire PDF or not.
While rendering your response read above mentioned configuration if flag is set generate minimal PDF with 20 pages with hyperlink to download entire PDF else minimal PDF with 20 pages only
When you prepare initial response of your web page add PDF which contains say 20 pages (minimal PDF) only and process the response
Tried googling for a readily available script, but to no avail. I'm trying to find a script that does the below. Im not sure of there is a name for it.
Thank you in advance!
Function: Banner rotator with a single URL (PHP based)
Example:
User uploads 5 images (468x60px)
The system generates a a single image URL (e.g. http://demo.com/image.gif)
When user goes to the generated URL, it randomly shows 1 of his 5 images
Every time he refreshes the URL, it randomly shows him another one of his images
You can have the server-side code that processes the given URL return a random image each time. If you specify the server-side language (PHP, ASP.Net, JSP, ...) that you are using, I can give an example.
The URL can be something like
http://demo.com/image/
It does not need to have a specific image name in it.
The key is to ensure that the browser does not try and cache that URL. Set appropriate cache headers when returning the image. Again, the mechanics of doing that are specific to your language.
PHP Example
This short tutorial shows you now to select a random image from a folder of images
http://www.heckdesigns.com/tutorials/tutorial-pull-in-a-random-image-from-a-folder-with-php/
URL
You really should not have to require your URL to end in .png or whatever. If you set the Content-Type appropriately (as the tutorial above does), any web browser should display it properly. If that is in fact a requirement, you can use Apache rewrite rules to do that.
See
mod_rewrite and image redirecting
I have an application that will check if a javascript file exists on our CDN and I would like to display the contents of that file in the browser window. I have all the nuts and bolts figured out, I just need to display the contents of the javascript file when I put in the URL where it exists.
Thanks in advance.
I believe you can output a javascript file to a webpage by just making sure any html elements are escaped. You can use the htmleditformat() function to do this when you output the value.
For example:
<cfhttp url="#jsurl#" />
<cfoutput><pre>#htmleditformat(cfhttp.filecontent)#</pre></cfoutput>
Other options just using the js address directly are to 1) link to the js file if you just want to be able to see it in the window, or 2) show the js file in an iframe
I'm not quite sure what you're asking:
"I need to open a javascript file in a web browser"
A. this is OS dependant, you call the binary that's registered for .htm files with parameters pointing it's initial destination to that .js file.
"I have a web app and want to dynamically display the contents of remote files formatted as text"
A. Use a block and fill it with GetWebResourceUrl().
"I am writing a standalone app and want to display remote files as text"
A. If you are writing a standalone, why do you want to display the contents of a js file via a browser? Use your local API, or launch the default text viewer with a local temp copy.
I know this has been asked plenty of times, but this is a special case. I'm working on an online HTML editor, using the design function of HTML 5 browsers (yeah, I found a useful application for this feature). I want to let the developer load a page, but developers are lazy (so am I), so I don't want them to enter the full path to their page. To prevent this, I use a file input (id="temp") WHICH DOESN'T GO TO THE SERVER!!!
I tried to open the local HTML file in a new browser in several ways, but the relative links in the page don't work:
window.open(temp.files.item(0)?temp.files.item(0).getAsDataURL():'',title.value,'width='+screen.width+',height='+screen.height)
The URL is encoded. This way the links in the file don't work, like in a ZIP file.
last = window.open('',title.value,'width='+screen.width+',height='+screen.height)
if(temp.files.item(0))
last.document.body.innerHTML = temp.files.item(0).getAsText("utf-8")
This code opens a blank page and copies the HTML code to the blank page. Of course the links in this page don't work either. temp.value only shows the filename, not the path.
Browsers simply will not tell you the information you want. The "value" property of "file" input elements does not contain the path.
If "the page" is really just an HTML page, then you might want to look into the HTML5 file reader stuff and see if you could at least read the file contents and dump them into a new browser window/tab. There might still be problems with HTML documents that expect to be able to locate auxiliary files (CSS, images, etc) via relative paths.