I would download and view PDF files located in a folder on a server on an html page .
The problem is that when I perform :
Embed src = " D: \\ www \\ \\ xxx xxx xxx \\ \\ xxx.pdf " alt = " pdf " width = " 600 " height = " 700 ">
Google Chrome reads " Not allowed to load local resources " ..
Where does the problem come from and how resolve it ?
Thank you in advance.
Google chrome has inbuilt functionality to read pdf files. You just have to redirect the user to the location of pdf using href and that's all, it will automatically load pdf.
P.S. - There will also be an option to download pdf.
You and use ctrl+p on the html page in the google chrome browser and save that page as an .pdf
Are you trying to do this with code, or within HTML? Is this on a local network path, or are you trying to save it somewhere from an external site?
If you've put the PDFs where they belong (assuming network) and you want the user to be able to open it by clicking on a webpage link, write your tag out with something like:
<embed src="D:\Thepath\ToYour\File.pdf width="600" height="700" type='application/pdf'> Web page Text here for your PDF </embed>
Also, it shouldn't be necessary to double-up on the backslashes, as HTML doesn't use escape characters this way (UNLESS it's actually happening in code from somewhere).
It may be worth looking into some of the responses from this article here, about whether to use an embed or object tag: Recommended way to embed a PDF in HTML
You need to pass a server relative path for the file, like this:
<Embed src="http://10.0.0.1/files/xxx.pdf " alt="pdf" width="600px" height="700px"></Embed>
When 10.0.0.1 is your server IP, also, you can use a server name like http://myserver
You also can check this for more info Recommended way to embed PDF in HTML?
I've experienced some unexpected behavior of Chrome since the newest version:
While in Firefox this Code is working Perfectly fine:
<a
id="playlist"
class="button"
download="Name.xspf"
href="data:application/octet-stream;base64,PD94ANDSOON"
style="display: inline;">
Download Me
</a>
It isn't working in Chrome (Simply downloading a file named "Download"), but has worked pretty fine before. What do I have to change that it is working again?
After some research I have finally found your problem.
<a>'s download attribute:
If the HTTP header Content-Disposition: is present and gives a different filename than this attribute, the HTTP header has priority over this attribute.
If this attribute is present and Content-Disposition: is set to inline, Firefox gives priority to Content-Disposition, like for the filename case, while Chrome gives priority to the download attribute.
Source
HTTP-Header Content-Disposition
Reading the comments, I had the same issue as #buffer-overflow and found this in the issue:
I'm guessing that the web page and the download are on different origins. We no longer honor the download attribute suggested filename for cross origin requests. Clicking on the link still initiates a download. But the the filename is only derived from factors solely dependent on the server (e.g. Content-Disposition header in the response and the URL).
So no chance I could make it work ... :(
I had this problem with wordpress, the problem is that wordpress generates the full path of the file, and in the a tag you have to remove the full domain name and add a relative path
Example, instead of:
<a href="http://mywordpresssite.com/wp-content/uploads/file.mp4" download="file.mp4" >
You have to do this:
<a href="/wp-content/uploads/file.mp4" download="file.mp4">
This will make it work
This is the current behaviour in Chrome as of 16 Aug, 2021
If you are calling an api like this:
http://localhost:9000/api/v1/service/email/attachment/dummy.pdf
Chrome will try to parse the last value of the path param and ignore any value passed to attachment attribute of a link if Content-Disposition is not set or is set to inline from the server, in which case the pdf file will have the name dummy.pdf
If Content-Disposition is set to attachment, then chrome will save the file with the filename value from Content-Disposition header.
That is if the server were to respond like this:
res.setHeader(
"Content-disposition",
"attachment; filename=" + "server-dummy.pdf"
);
res.setHeader("Content-Type", "application/pdf");
The file would be saved as server-dummy.pdf regardless of the presence of download attribute.
I have a simple solution regarding this issue. You just need to put your html file into a server like Apache using xampp control and so on. Because the download attribute is properly working through a server.
<a download href="data:application/octet-stream;base64,PD94ANDSOON">Download Me</a>
Are you looking at the files via a web server or your local filesystem - Does the browser's URL bar start with http:// or file:///?
I just ran some tests in Chrome, and while it will download the file, it doesn't respect the value of the download attribute when you're using the local file.
If you start hosting it on a web server, this will start working. If you're just doing this for yourself on your computer, check out WAMP for Windows or MAMP for macOS to get started with Apache.
I recommend using the file-saver NPM Package to implement or force download.
// 1.
npm i file-saver // install via npm or
yarn add file-saver // install via yarn
// 2.
import { saveAs } from 'file-saver'
// 3.
saveAs('https://httpbin.org/image', 'image.jpg')
References
https://www.npmjs.com/package/file-saver
https://www.npmjs.com/package/file-saver#saving-urls // direct url to Saving URLs
https://www.javascripting.com/view/filesaver-js
It won't work without a server. download attribute will do the work only when using a server (local/remote) like tomcat/xampp/wampserver...
<a href="videos/sample.mp4" download>Download Video</a>
<a href="images/sample.jpg" download>Download Image</a>
Not just only for videos or images.
In case anyone is having problems with this when the address of the file is different from this one, you could try to:
Locally create a Blob from downloading locally the original file.
Creating a URL object based on the local Blob.
It would look like this:
const outsideRes = await fetch(outsideUrl);
const blob = await outsideRes.blob();
const url = window.URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "marketing-payout-report.csv";
link.click();
This can be resolved by adding target="_blank" attribute to the href.
Like this:
Save sprites.svg as
<a target="_blank" download="somefilename.svg"
href="https://cdn.sstatic.net/Img/unified/sprites.svg"
>somefilename.svg</a>
The file has to be in some zipped format!
Go To Chrome Click on “Settings” and you'll see a new page pop up in your Chrome browser window. Scroll down to Advanced Settings, find the Downloads group, and clear your Auto Open options. Next time you download an item, it will be saved instead of opened automatically.
I'm trying to display image in my jsp from my local disk inside a web project. My Code is:
<img src="C:/Documents and Settings/chandhu/HelloWorld0.png" width="80px" height="100px" style="margin-left: 20px;"/>
After I run my application the image is not getting displayed. In src attribute it is additionally adding some source as mentioned below:
<img src="http://localhost:8080/Ecm/C:/Documents and Settings/chandhu/HelloWorld0.png" width="80px" height="100px" style="margin-left: 20px;"/>
Can anyone tell me what I am doing incorrectly?
You can't do this way.. It should be in reach of container. or you can write a servlet which will read disk file and make HTTPResponse
You mentioned using jsp , therefor i think you are working with web application ,in your WEB-INF folder create a directory named image or as you needed and put your image there .
Now you can access that from code as :
String fullPath = servletContext.getRealPath("/WEB-INF/image/" + image_file_name+ ".jpg");
InputStream is = new FileInputStream(fullPath );
Or you may use :
InputStream stream = this.getClass().getResourceAsStream("/WEB-INF/image/image_file_name.jpg");
to read stream directly .
related question may help you :
JPEG file in WEB-INF returned as null by ServletContext#getResource()
Cant retrieve an images from the WEB-INF folder ussing classLoader.getResourceAsStream()
I put the user uploaded image files on separate disk partition on my local dev server(OS windows) which is outside of project folder. I need to access those image files in html pages of web app.
I tried out giving paths like: http://localhost:8080/C://tmp/thumbnails/pl_2001.JPEG but no help. Image is not fetched. How to properly access such files in html pages ?
You will have to use rewrites for this so you don't display sensitive folder names.
if you are using php you can use .htaccess rewrites for a slug something like images/someimage.mime and split/get what's after images/ and have a php function that takes the filename and makes sure it exists and if you want you can check if its a valid mime then send a header to say its a image/somemime so the browser can display the image instead of gibberish it will display without it.
$filename = "C://tmp/" . $file;
if(file_exists($filename)){
$img = getimagesize($filename);
if(in_array($img['mime'], array('jpg','jpeg','gif','png','etc'))){
header("Content-type: image/" . $img['mime']);
readfile($filename);
}else{
//default image
}
}else{
//default image
}
I haven't tested this but it should give you a idea on getting you started. If this isn't the language you are looking for try searching for something similar for your language you are using.
I have this in my controller class:
public ActionResult ExcelDoc()
{
var doc = Server.MapPath("~/Content/Sheet1.xlsx");
return File(doc, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
}
And in my view:
<iframe src="/Centres/ExcelDoc"></iframe>
It simply DOES NOT display the file in the iframe. Instead, it begins downloading sheet1.xlsx as ExcelDoc.xlsx. Very frustrating as previous questions have helped me to develop this solution to my previous problem of trying to display a dynamically generated excel file in an iframe. I am using Google Chrome, if that is relevant.
Returning a file makes your browser try to download it, that's expected behaviour. I think it's not possible to display an excel file as-is in your browser window, unless you use something like a plug-in.