Offline availability of .pdf while using PDF.js - javascript

My problem is the following:
I use PDF.js to display a .pdf on a website. However the .pdf must be included from some url. That means, that if one downloads the website for offline purposes, the .pdf will not be included and therefore can not be displayed. Thus I wonder, whether it is possible to embed the .pdf (e.g. in an html-container), so that it can be found by PDF.js. In this case, offline mode would be easy to achieve.

I think this can't be achieved without using a localhost (or a browser plugin etc.).

Related

Squarespace Developer Mode adding files

I am in developer mode in the .region file trying to add a background video with the video tag. I put the mp4 file into the template folder and I have been trying to access it through src="video.mp4" and display the video. It doesn't display the video and I am not sure why I can't grab it. When i change the source to any http// video online it works so its not the code. It only doesn't display the video when I try grabbing it from the local folder. Any leads or help would be appreciated. Thank you!
Files that are directly located in the /template folder are not intended to be accessible via http. Instead, put the file within /template/assets and then reference the file as /assets/video.mp4.
If that doesn't help, ensure that the file is even accessible via http by entering http://yoursite.squarespace.com/assets/video.mp4 in the address bar (using your site's correct URL). If you can access the video file, then it will work as a src attribute of a video element. If you cannot access it, then something else is going on: either you haven't uploaded the file or the file name is incorrect.
Another tip: if using the full URL for a file (as opposed to the relative URL), try using https for the protocol in place of http. The correct protocol depends on your site's settings, of course, and whether you are using your built-in or custom domain.
If using the local development server via Node.js (as opposed to the live server, that is, your actual Squarespace site), try pushing/uploading the files to the live server on Squarespace (via Git or SFTP) and then retesting locally. I've found that sometimes this may be required due to caching in the local environment. This will also reveal whether the file you are uploading is too large (the documentation does claim a 1MB limit which may be true, though it may be as large as 5MB or 20MB if the docs are out of date; I cannot recall whether this has changed).
If the file is too large for the /assets folder, then your only other option besides hosting it via a different service entirely is to use the file storage via the Squarespace Config UI, which allows up to 20MB, and referencing your video via that path. You'd have to get the video down to 20MB by shortening, scaling or further compressing it.
If hosting the file via a different service, Cloudinary may be worth considering; a free account may allow up to a 100MB video file and enough bandwidth (assuming your website's traffic is relatively low).

Control a PPTX file with Javascript offline

This is an odd use-case and I've tried to steer the users away from this, but I have a request to load locally stored PPT files in an HTML environment.
The idea is to view the PPT in an iframe so that I can "decorate" all around it. Users will be creating playlists, of sorts, so I need to add "next" and "previous" presnetation buttons, etc.
I have an online version of this working using the Office webapp link that many other posts have shared, but there is a concern for poor connectivity so they want it to be available offline.
My instinct was to shape this up as a PWA. I can make them use Chrome, so I have the FileSystem API "caching" the PPT files from the online source. However, I have no way to render the saved files!
Because it's offline, I can't use googledocs or continue to MS web office.
I don't know the AppCache feature well enough, but wondered if I can preload all of the docs in an iframe, will it cache those. My thought is that it won't, because the content is on microsoft (or Google's) site.
All users will have a legal copy of PPT on the computer, if that helps at all.
So far I have tried storing the files using the filesystem API in combination with the Chrome offline viewer extension and alternatively the Native Docs extension. The Chrome one will allow me to open a doc, but directly in edit mode. I need to simulate the behavior of a ppsx file, but neither extension works with ppsx files and I don't see documentation for an API that will allow me to "auto-play" the presentations.
Thanks for any ideas!
Wayne

Use PDF.js offline

Is it possible to use PDF.js without having the website online? I'm trying to do a simple offline website that reads pdf using pdf.js but it won't work without being online.
Anyone could help?
Yes absolutely you can use it offline. Download the latest version here.
Now extract the zip file and put it on a server(use xampp/wamp/lamp or any other localhost) because the worker is not enabled for file:// urls.
To show the pdf files traverse to web/viewer.html from the localhost and it should load its default pdf.
As to the question about how to show your pdf's use: viewer.html?file=relative/path/to/your/pdf
Say for example inside the web folder(the one in which viewer.html is there) of your pdf.js you create a directory say named pdfFiles and in it you add a pdf named say mypdf.pdf in it then to display it use: viewer.html?file=pdfFiles/mypdf.pdf and it will display it.
Look here for more details on how to dynamically assign PDF file paths to the viewer. If you have any other queries let me know. I have used pdf.js offline and it works wonderfully on almost all the browsers I know.

Is it possible for a remote html file to download a file to a client?

I'm an iOS dev looking into some security aspects of a native iPhone app that loads local html pages into a UIWebView (that's the iOS class that give browsers functionality to a native app).
If the app loads a local html file and that file contains a link to an external html file then is it possible for that external file to download a file to the client (another html file or a javascript file)? My knowledge of html/javascript isn't detailed enough in this area.
E.g. If A.html is file physically present on the phone and A.html contains a href to B.html where B.html is on a server then is it possible for B.html (using whatever means) to move a file (C.html or D.js etc.) from the server onto the device?
What you probably mean is : are HTML pages able to download (and potentially execute or overwrite) content/code on the device? I'm just going to assume that in the following.
First, the browser isn't supposed to be able to download anything without the user consent. That's especially true on iOS, where the browser actually can't download anything at all. (Well, you can actually download images by long-pressing on them, but they are only going to go to the Photo Roll. Any other download will just fail.)
HTML pages (and JavaScript, images, ...) are of course downloaded to the device before the browser or UIWebView displays them, but they can't access anything on the filesystem.
What's more, due to the same-origin policy, a web page cannot access anything that's outside of its domain (cross-origin requests allow this, but they require the server to send a particular header).
Say your page is on http://mywebsite.com : you can't make a request to http://blah.org if it's not setup properly, or even (much more dangerous) to file:///etc/passwd (which you have no way to setup properly).
I'm not sure about local pages, but (at least on Chrome on the desktop) local web pages cannot download anything at all.
Of course, all of these are the expected behavior.
There have been cases of vulnerabilities (this one for instance) where Safari allows unprivileged access to the filesystem, but in most cases they have been patched quickly by Apple and you won't have to (and are not supposed to if you want to avoid unnecessary headaches) worry about them.

Javascript local file saving or onSave event to get saved filename

I'm developing a web app that needs some sort of filesystem access. Ideally I'd want to be able to "Open..." a file into the app and then "Save" the file back to local filesystem at the location that the user opened it from.
Currently, we use a java applet to achieve this functionality, but since java is going out of style, we're needing to do this with javascript and html5.
Obviously, this can't be done because of security reasons built into browsers, so I'm trying to somewhat emulate it.
I'm using the html5 file api to successfully import/open the files, so that's half the battle. The hard part is getting the saving feature. I'm getting close using an iframe and content-disposition, but problems arise when browsers are set to automatically download the files to a downloads folder... users may get confused and be unable to locate the file they just downloaded.
So, my question is this: is there some sort of onSave event or some kind of way for the browser's "Save As..." window to return at least the filename that the user saved the file under?
Also, I've looked into the filesystem/fileWriter html5 apis, but from my understanding they're limited to only a sandboxed area of the local filesystem and only available in chrome dev releases.
Any help would be appreciated!
No, there is no way to do that with pure JavaScript. You can manage to trigger a download with data URIs or an iframe with some headers but you can't circumvent the browsers' download managers.
You can either use a Flash or Java applet to handle the saving for you, or ask the user to right click on the link and do save as, then he might be able to choose the destination.
One popular option using Flash is Downloadify.

Categories