VueJS: Viewing PDF files stored in drive (outside the project folder) - javascript

I'm new to Vue.js and would like to know if there's a way to view PDF files that are stored independently from the Vue project through said Vue application.
Here's what I need:
All PDF files are stored in a folder. I'd like to provide links to access them in the application that I get from the backend server. Upon clicking the link, the PDF should open in a new tab and the URL would simply be something like
file:///C:/Users/user/Downloads/campusmap.pdf
What I have tried so far:
<a :href="fileAddress">View file</a>
When I hover over the link on my browser, It shows the right URL but clicking on it does nothing.
If I right-click to open in a new tab, it says blocked (about:blank#blocked)
Using <router-link> shows
localhost:8080/C:/Users/user/Downloads/campusmap.pdf
when hovered over it.
Is there a way to be able to just view the PDF through a link the way I want? Please note that I can't store all the PDF files in the asset or public folders.
Thanks for your help!

You can't link to a file:// protocol url from a page sourced via the http(s):// protocol - this is a security measure built in to modern browsers. Your only option is to also serve up the local files behind a web server, or run the app locally behind a file:// url.

Related

How does one prevent embeded images from exposing website folder structure via their sources when page is inspected (developer tools)?

I'm developing a PHP web app and I feel concerned that image paths expose their locations (directory path) when the developer tools is opened for page inspection.
Example:
"app/users/secretUsers/johnDoe.img"
Shouldn't this undermine the security of the site in some ways? Is there a way to get around this?
Most PHP frameworks have a public directory to place the images, Javascript, CSS, etc.
But if you are creating a web app without using a framework, the easiest workaround I used is to create a index.php in my public directories and redirect all the requests to the homepage.
Example:
If your url is www.mywebApp.com/images then you will be redirected to the homepage. But if your url is www.mywebApp.com/images/user.jpg then you can access the image.

JQuery window.open() Not allowed to load local resource in Chrome

Upon button click i am trying to load a doc file which is located in the shared network path, this works fine in InterExplorer but in Chrome i get a error 'Not Allowed to load local resource'
windows.open('file://userguide/oracle/training.docx',"_blank")
Read that Chrome will not allow to load local resources, do we have any alternative way to load a .docx file upn button click ?
This is in ASP.NET MVC Razor view.
This is one of those things that is deprecated by modern web browsers. If you look at it objectively its a security issue to allow frontend scripts to just access your filesystem.
An alternative could be to have the user select the file from a filechooser and then you would have the content and could open a window with it
edit: grammar
The open() method opens a new browser window, or a new tab, depending on your browser settings and the parameter values.you can view a pdf file using this method but this is not the case with .docx.If you want to view .docx file use tools like google docs or you can save as your word file as .html(but some feature will be lost) and then load the html file in html editor like tinymce

Downloading loaded webpage as html

I'm new here. My problem is I got a loaded tab on chrome and the webpage is not accessible anymore.
anyway, the page contents are still on the server at least thumbnails.
Is there a way to download this tab entirely with its page structure as HTML for viewing later.
I don't turned off my pc for 2 days only hibernate it. Searching for a way but can't find any resource.
edit: the webpage is a meganz folder which has ~100 folders on it. i think it's very hard to download with page structure because it loads a file explorer application (server-side i think) when first loading the folder and files.
Either File > Save Page As.. (in Chrome)
or
FTP into the web server and download the whole folder/page from the public_html folder, if it is a static page. If it's not, you'll only get template files, and no content data.
or if you're just interested in reading the content:
File > Print > Save as PDF

PDF overview links not working inside my angularjs app

My web application used PDF.js to load PDFs in the browser. It gets the PDFs from a REST API.
The web app is a single page angularjs affair. You can navigate inside the app and open up one of these PDFs. When you do open one of them, the relative links to other PDFs inside the Outline of the first PDF do not work.
When I access the REST API URL at say, api.example.com/rest/my-pdf.pdf, with firefox (which used PDF.js to render PDFs), the PDF opens and the Outline has the correct relative links.
I suspect that it has something to do with my app being on a different origin than the PDF serving REST API.
Each OutlineItem has an action dictionary with my relative links in there. The action dictionary has an ActionType (S) of Launch and a FileStream (F) value shown below.
I'm using the PDF.js viewer.html file to view PDFs.
This is done by creating an iframe like so:
<iframe src="/path/to/pdfjs/viewer.html?file=http://api.example.com/rest/my-pdf.pdf">
How can I get relative links working here?
P.S. I've scratched out only the actual filenames in red. I've left the path as is if it helps.
try this method
onclick=" window.open('../../assets/python/python.pdf'); return true;"
Hope it works for you.
The problem was that the links in the PDF outline were the "Launch ActionType".
PDF.js can't actually handle "Launch" types because it cannot launch external programs, seeing as it runs in a browser.
So, what PDF.js does is it pretends that the "Launch" type is a "GoToR ActionType" (Go To Remote).
This will work if the URL that the PDF is loaded from is the origin that PDF.js is also loaded from.
If this is not the case, like in my app (where PDF.js is loaded in an iframe inside an angular app), PDF.js is unable to resolve the URLs and so it leaves the links blank.
Section 8.5 of the PDF Reference contains information on Actions in PDFs.
PDF.js source file shows how different ActionTypes are processed.

Get local paths for all cached resource files

Using Firefox addon SDK, is there a way to get the local paths for all the resources (css, js, images) of the page that is currently opened in a tab?
I'm trying to implement the functionality of saving pages locally (kind of like "File" -> "Save page as..."), and for that I need to know the location of the resources that were downloaded by the browser along with the HTML page itself;
Visit this link
To enable the application cache for an application, you must include the manifest attribute in the element in your application's pages, as go in the following
link
https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

Categories