Load pdf on foreign url with pdf.js - javascript

I am trying to load pdf from another server to the viewer of pdf.js in my server.I got error
"PDF.js v1.4.20 (build: b15f335)
Message: file origin does not match viewer's"
I already checked many answer, many of them said that pass the pdf url through a proxy like:- link
After searching a lot i found that they release a new patch in which they have lock down any CDR request, correct me if i am wrong:-Here is the link
but in their user manual they specified that it is possible here is the link
I tried all method but not able to enable CDR on my server and many methods didn't work.
Please help me to resolve this issue.
My Basic idea is to show pdf(which is hosted on 3rd party server) on my pdf reader(that i made it from pdf.js).

I resolved this issue by comment this lines in viewer.js
if (fileOrigin !== viewerOrigin) {
throw new Error('file origin does not match viewer\'s');
}
and use proxy like this.
http://192.168.0.101/web/viewer.html?file=https://cors-anywhere.herokuapp.com/pathofpdf.pdf

Add your domain/origin to HOSTED_VIEWER_ORIGINS array

I resolved this issue by adding this line in viewer.js
var LOCAL_AUTO_DETECT_ORIGIN = window.location.origin;
var HOSTED_VIEWER_ORIGINS = ['null', 'http://mozilla.github.io', 'https://mozilla.github.io'];
HOSTED_VIEWER_ORIGINS.push(LOCAL_AUTO_DETECT_ORIGIN);

The problem in my case was the link wasnt in https while the site is secured

pdfjs respect CORS settings. Do the following
Go to viewer.js file and find the location of HOSTED_VIEWER_ORIGINS. Below that line add your domain to the array HOSTED_VIEWER_ORIGINS like this
const LOCAL_AUTO_DETECT_ORIGIN = window.location.origin;
HOSTED_VIEWER_ORIGINS.push(LOCAL_AUTO_DETECT_ORIGIN);
if your file is hosted n AWS S3 bucket, then set CORS policy on the bucket to allow all your domains read files from that bucket
That should solve your prblem

Related

How do I save file urls on javascript?

I'm creating a webapp on which I load and display images.
I want to have a feature on which the user can save the images they loaded so they can reload them on future sessions without having to manually set up everything again.
For doing this I have thought of storing the url from the files, but it looks like I can't access the url of files because of security on most browsers. Is there anything I can do to save the url of the files, or something similar so I can reload the files on future sessions?
It will ideally allow to store many files, so saving the local paths to the images is best so it doesn't consume much space.
For the app I'm using angular and tauri.
Anyone can help? Thanks a lot in advance!
EDIT: I found out there is a way to do this on tauri with the dialog module you can find here: https://tauri.studio/api/js/modules/dialog more info here:https://github.com/tauri-apps/wry/issues/87
If anyone reads this and is using electron instead of tauri I've read that the File Object gets added a path property, so you can get it from there.
Thanks everyone for the help!
For storing user-downloaded images, you need a backend. If you don't want to run one, you can try to store images as data: urls in cookies or local storage, but it won't work well.
I recently did one functionality for download file and sharing the code here
downloadFile(data, fileName) {
const urlBlob = window.URL.createObjectURL(data);
const link = document.createElement('a');
link.href = urlBlob;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
Data stands for your file path or file URL and
fileName stands for File save with name as
you want
Found the answer!
I found out there is a way to do this on tauri with the dialog module you can find here: https://tauri.studio/api/js/modules/dialog more info here:https://github.com/tauri-apps/wry/issues/87
If anyone reads this and is using electron instead of tauri I've read that the File Object gets added a path property, so you can get it from there.
You can use cookies to store data. Users can block or remove cookies, but most users (as most users use Chrome) have cookies enabled by default.
You can store a cookie by doing
document.imageurl = "http://example.com";
and access it using
console.log(document.imageurl);
or something similar (variable is stored at document.imageurl)
The variable will stay there when the page is reloaded.

How to read KMLfile from local server for Openlayers "EarthQuakes in KML"?

I use the following EarthQuake map on my local server:
https://openlayers.org/en/v4.6.5/examples/kml-earthquakes.html
I have a standalone "map.html" for the map in my application in my "Views" folder.
Impementing this works ok, the map loads, and using the examples data:
url: 'https://openlayers.org/en/v4.6.5/examples/data/kml/2012_Earthquakes_Mag5.kml'
The data shows up in the map, all good so far
By going to this'data-url', a file is downloaded. So i download and edit this file with my own KML-datapoints. And then i place this file in the same folder as my "map.html" (The views folder).
I have tried to reference it manually by path, but got some CORS issues, then i sought out some xmlhttprequest, but not sure that is the right path since it's supposed to be a file (?) .....
So it all boils down to:
How do i reference my kml-file from within the script tags in the HTML-eartquake-file to this file in the same folder?
Update feb 2020:
I think now the CORS issue is removed. However, when i try to implement this it does not work:
If i use the Openlayer example link in the VectorSource - URL; https://openlayers.org/en/v4.6.5/examples/data/kml/2012_Earthquakes_Mag5.kml, my app downloads a file like this: "filename.kml"
If i use my own file on my server, i get a file like this "filename"
That is without the .kml extension.
The url looks like this in this case: https://myapp.net/mydata.kml
In express/nodejs i send the file like this:
router.get("/mydata", function (req, res) {
res.sendFile(path + "mydata.kml");
});
Here is a example from the Chrome download bar:
How can i send my file WITH extension? And will that solve my problem?
Thanks
If you are using IIS you need to go to the management panel and add .kml to the MIME types. If you are planning a lot a mapping applications adding .geojson (application/json) and .gml and .gpx (text/xml) might also be useful.
You will also need to enable cross origin access for your data folder

How to make github pages url case insensitive?

Website works for
jerrygoyal.github.io/Flash-Clipboard
but not for (404 error):
jerrygoyal.github.io/flash-clipboard
jerrygoyal.github.io/FLASH-clipboard
jerrygoyal.github.io/flaSH-CLIPboard
and so on
You get the idea!
How can I make the url case-insensitive?
I've never worked on Jekyll and not sure if my project pages are using jekyll or not. I only created an index.html page and put inside the docs folder of the repository.
I'm using a custom domain (www.jerryfactory.com) to map jerrygoyal.github.io
Here's the URL to my Github Organisation site : https://github.com/JerryGoyal/jerrygoyal.github.io
And URL for my Github project site:
https://github.com/JerryGoyal/Flash-Clipboard/tree/master/docs
I'm thinking of moving my project site content to my Github Organisation site if it's possible. So if the URL case insensitivity works for only Organisation site it's fine.
Ref: Org and Project Site in Github
How can I make the url case-insensitive?
The short answer is: You cannot / It's not possible in GitHub Pages as of this writing.
The long answer is: Having URLs case-sensitive is a web standard and most webservers will respect that. This has nothing to do with Jekyll or any other similar tool. It's a responsibility of the webserver that is serving the HTML pages that were generated by Jekyll, and in the case of GitHub Pages, they use a *nix-based webserver that is compliant with case-sensitive URLs when locating resources.
A common way to solve this problem is to make sure your pages in Jekyll are always lower-case, which in turn will generate lower-cased URLs.
This shouldn't really be a problem, unless your users are typing the URLs by themselves... And in that case, if you want to be proactive, you can use the jekyll-redirect-from plugin and create redirect entries of the most common ways you believe users will try to access each page.
For example, having the main URL as
augustoproiete.github.io/flash-clipboard
and redirect the ones below to the main one above via jekyll-redirect-from
augustoproiete.github.io/Flash-Clipboard
augustoproiete.github.io/FLASH-CLIPBOARD
There is no direct way to make github page URLs case-sensitive. But, you can use following hack:-
Redirect from 404 page with mixed-case or upper-case URL to lower case URL. Steps to achieve this:-
Just go to your root repo (your_username.github.io).
If not already exist then create a 404.html file and add the following script in it.
<script>
window.onload = () => {
currentURL = window.location.href;
lowerCaseURL = currentURL.toLowerCase();
if (currentURL != lowerCaseURL) {
location.replace(lowerCaseURL);
}
};
</script>
Note:- Make sure your pages/repo name are always in lower-case.
Logic explained with example:-
If your URL is:-
anmol53.github.io/bmi-tracker
and someone tried following URL:-
anmol53.github.io/BMI-Tracker
By default he/she will get 404. Now we will redirect him/her to anmol53.github.io/bmi-tracker by changing case of current URL by using above script.
You can’t make it case-sensitive. Sorry. Case-sensitive URLs are a web-standard. It would be cool if URLs were case-insensitive, but that isn’t true.

Get parameters at the end of URL on Apache Web Server

I have a URL with the following syntax:
https://www.domain.com/pay/a1b2c
In the /pay directory I have a simple payment form. I am using JavaScript to get the URL appendix a1b2c and process it in order to get further data to display in the payment form:
var url = window.location.href;
var appendix = url.split("/").pop();
...
But if I open the URL in the browser, Apache says (of course):
Not Found
The requested URL /pay/a1b2c was not found on this server.
How can I solve this problem? Which Apache config do I need?
I found a solution by asking humbedoo on the Apache Mailing list:
You can use AcceptPathInfo in order to get the appendix.
For example, assume the location /test/ points to a directory that
contains only the single file here.html. Then requests for
/test/here.html/more and /test/nothere.html/more both collect /more as
PATH_INFO.

Google Drive raw data?

Is there any URL google has that contains the raw data for the file? using https://drive.google.com/file/d/FILE_ID just takes you to a 'share' section of the file... say I have a .js file on GDrive. If you go to their share link, they have a share page. Is there any link to get the raw javascript from the file, as to use in a <script src="google_link_or_whatever">?
First, go to the sharing settings for your document and choose "Anyone with a link." It will generate a link in the format https://drive.google.com/file/d/XXX/view?usp=sharing.
Now you can use the following URL format: https://drive.google.com/uc?id=XXX
Note that I'm seeing an HTTP redirect when I do this, so use curl -L on the command line or otherwise make sure that your HTTP client follows redirect.
Sharing link:
https://drive.google.com/file/d/YOUR_ID/view?usp=sharing
Raw download link:
https://drive.google.com/uc?export=download&id=YOUR_ID
NOTE - THIS WAS THE SOLUTION BUT IT NO LONGER WORKS - SEE COMMENT BY #Bobby Fritze below
No API's and no JS necessary.
Confirmed now working on latest version of Drive.
Great workaround for if your server doesn't use https but a vendor plugin demands https to call in a CSS or other file:
On the folder with your intended file (e.g. FILE.css), hit Sharing Settings, then Advanced, then select "Public on the web - Anyone on the Internet can find and view."
In the URL bar (or share link), copy everything after the drive.google.com/drive/u/0/folders/
Use that ID to replace the XX-XXXXXXXXXXXXX in: http://googledrive.com/host/XX-XXXXXXXXXXXXX/FILE.css
Navigate to the appended URL in Step 3 and you will now see your raw data.
My use case below:
<script type="text/javascript">
var vsDisableResize = false;
var vsCssUrl = 'https://cbe7c864b9c1ae8d5be60c7fed3e467334a04d2f.googledrive.com/host/0B9ngkmVbo5T7TDhTTU81M25iNnc/cart.css';
var vsWineryId = '850';
var vsWineListId = '71';
Credit to #chris.huh at: https://productforums.google.com/forum/#!topic/drive/MyD7dgLJaEo

Categories

Resources