PDF JS Functionality - javascript

I have created a HTML project. But my main aim is to display the pdf's on my site so that users can't save or download them is this possible using (https://mozilla.github.io/pdf.js/) viewer? If so how can i do it because i'm trying to output a lot of pdfs and this just seems impossible to do looking at the code.

No, it's not possible to display native pdfs to the user without allowing them to download them. By the nature of http, they will have had to download the pdf data in order for them to be displayed.
However, you could take snapshots of the pdf on the server, and display these to the user as pngs.
There are a number of libraries that will allow you to convert the first page of a pdf to an image, I suggest you start by trying to implement one of those.

Related

Use Cmd+P / save as PDF to save many page of website as PDFs - using one of R, JavaScript

Being able to quickly and easily visit many pages of our website, and save those pages as local PDFs, is essential for a feature we're building into our app. This question on the topic was marked as duplicate, and so I wanted to adjust the question:
We have a website that:
has a login to get through
has 100s of pages we'd like to visit and save as PDFs
Rather than using some complex JS PDF library for this, we're leveraging chrome's built in Cmd+P to launch print panel and then Destination: Save as PDF to save the entire webpage as a single PDF file. Our website is built so that pages save neatly to PDF using the browsers built-in save-to-pdf functionality.
What is the best way to automate this process over 100s of URLs? We can very easily, in R or JS, create an array of the 100s of different page URLs that need to be visited. Is RSelenium a smart approach for this, like how it's used in the hyperlink? We are currently stuck with RSelenium as the linked answer in that question is not working for us. We are able to launch the print panel, however we cannot use RSelenium to click the Destination toggle nor the save button in the print panel.
Perhaps there is an easier way to do this using JavaScript?
Edit: I've given Mac's Automator a try, and have figured out how to open multiple pages at once. However it's not clear how to then automatically save the pages to PDF. It also doesn't seem sound to have 100s of tabs all open at the same time in browser.

Print Portion of the Browser Window to PDF and Send To Server to be Faxed

Like the title says, I have a requirement to print a part of the browser window to PDF and then send it to the server so that it can be faxed. I have already found a faxing service so the real problem is in figuring out how to generate the pdf to begin with. I have come up with several options to do this, however all of them come with significant downsides. They are:
Use window.print() on a button click along with print media queries and have the user download the resulting PDF and re-upload it to be faxed. The problem with this is that it is a multi-step process and my users would prefer to just click a single button
Use a library like jspdf to generate the pdf, output to a byte array and upload it to the server. This will work, however it looks terrible because I lose all styling and my print media queries will not be applied. So far, this is my best option
Render the HTML server side and generate a PDF from that. This will work fine, however it requires duplicating all of the work I have done client side (this is a SPA app) along with duplicating the maintenance.
Use a rendering service or library to run the client side application in a headless browser and generate the PDF from that output. This would be very complicated from a security perspective as the application lives behind a login page.
I would appreciate any suggestions not listed above as well as any advice on how to eliminate the cons posed by these options. Thanks in advance!
Looks like using jspdf to render the PDF along with a library such as html2canvas to convert the printable region into an image to preserve styles will get the job done. It has taken some work to configure everything properly (and I'm not through yet) but I am confident this solution will be effective.

preventing user from saving file from website but allow him to print it

I am working with a client who has a business of selling a genre of PDF files online and so he wants a functionality for his website where users can print the files but not be able to download it as PDF so as to prevent further distribution by users.
Is there any way by which I can give a print option in a website but users should not be able to download that file and just print it. I personally think this is kind of difficult as most browsers while handling a print command give the option to save the file as PDF.
I hope there is some way around it using javascript or some specialized javascript library.
It's not possible. What you print is what you download and therfor can be saved.
The only way I can think of to make it harder for the user to share the original PDF, is some server side service rendering the PDFs as images and serving those on a website which can be printed out. Of course the user could still save those images, but it wouldn't be in a PDF Format.
His best bet is to Watermark his files. Print dialog boxes now offer the option to "Print To PDF" & "Print to XPS", etc so a native ability to stop people from saving his files is not an option. I would suggest he watermark his files, that way at least his mark is on every page of all the documents.
Maybe you can encrypt the file or add a password to open it.

Hope to create gmail attachment preview like functionality using angularjs

I have a requirement where I want to show the file preview to the users.
There are various file types which are supported like; .pdf, .xlsx, .doc, .rar, .jpeg, .png and many more.
When user clicks on the preview it should open the file in popup where preview of the file is shown to him. User can Zoom-in, Zoom-out, Download the file. Just as you can see into gmail for attachment preview.
Please, can anyone guide me to any relevant library or helpful resource for the same.
Thanks in advance
There are two main ways you can do this.
1) Server-side: Render previews once server-side (on file upload) into jpg/png images, and store the previews on the server. This is the easiest to implement on the client side, but requires extra storage on the server.
2) Client-side: Render the previews 'live' with javascript in browser, this reduces the amount the server has to do/store, but does require the client to fully download the file in-memory before it can render the preview, which for large files could be an issue. Also, you would need javascript libraries included for likely each individual file type, since most libraries will target one specific file format.
Server-Side is probably the recommended way to go. What are you using for your web server?
You are looking at creating document viewer.
Belive me its big work as browser does not understand these formats. Browser can render images directly on canvas but it does not know how to render the other files. So, any file other than image formats, one need to save them temporarily on server and then stream on the browser and show them using the respective file viewer.
You can convert doc and xlsx files to pdf and show these files using pdf viewer (http://ngmodules.org/modules/ng-pdfviewer). There are plenty of document converters available on internet (however you will need to check the licensing terms as most of them are GPL licensed, hense can not be used in commercial projects).
If you want to save this work then go for third party server those take all paint to convert documents in html5 such as https://crocodoc.com/why-crocodoc/
You can also try using google doc viewer google doc veiwer
This question is fairly broad. I'm not going through all the steps of how to implement an attachment viewer directive, but here are some pointers you might find useful.
To allow the user to download the file, you simply put a download link somewhere. If you are hosting the attachment on Amazon S3, Google Cloud Storage or some other cloud storage service, check their documentation. If you're downloading the files from your own server, make sure to set the Content-Disposition HTTP response header to attachment; filename="ORIGINAL_FILENAME", where ORIGINAL_FILENAME is the file name you want to user to see in the save dialog that appears when they click the download link.
Now on to the viewer.
For PDF files, I'd use pdfJS. There's an angular directive for it here.
You could look at something like CloudConvert for other files, to convert ehm to a PDF, and then displaying them in pdfJS, but then you probably want to store the PDF on your server as well, in addition to the original files, which requires extra storage. You might also be able to use the Google Docs viewer, or Office 365 viewer, as described in this answer.

JavaScript downloader

I want to allow a web site users to be able to download files from my site, but with the help of a client-side downloader with an ability to continue an interrupted download.
For example, I want to sent a person a file with a size of 30+ Meg. I want the user to have the best downloading experience, so I can't afford him downloading 25 Meg and then getting the download dropped due to the network problems on his side.
Therefore, I want to have a javascript downloader rendered on a download page, that will show the actual client-side file delivery, and when it is downloaded, to give an ability to a user to save the file.
Or is it not possible due to the fact that javascript won't be able to open a save file dialog and save to a file system?
I'm afraid that is not possible with JavaScript and that's why:
To continue downloading from the certain point you should send to the server the position number to start downloading from. And as JavaScript has no access to local file system, you can't get that position.
UPD: it seems that I was too hurrying with the reply.
The file size can be gotten using the HTML5 File API and after getting the file size you can pass it to the server which should support the partial downloading.
But anyway, after downloading another part of the file you should sew two pieces together in some way; standard web browser dialog will only suggest to overwrite the file.
UPD2: to work with files in some Internet Explorers you can use FileSystemObject:
var fso;
fso = new ActiveXObject("Scripting.FileSystemObject");
I'd look into making a plugin or extension. Like those DownloadThemAll extensions for firefox and Google chrome. Another alternative would be to use Flash, either alone or integrating it with javascript like hinted here: http://www.communitymx.com/content/article.cfm?cid=0922A

Categories

Resources