Creating PDF file from remote URL with jsPDF - javascript

I'm struggling with this problem for quite a while and wanted to ask for help.
I'm trying to generate a PDF file from a remote URL in PHP.
for example from mysite.com?id=12 so when I click on this link the browser's pdf viewer opens with the contents of this URL including all styles etc.
I've tried it with jsPDF javascript library but it seems that it can't be used for remote URLs. I also found tons of libraries which all need API keys ( registration, subscription, payment ....).
I don't want to ask for code samples but just for instructions on which library is able to do that and the workflow.
Thanks in advance.

I believe you might find mPDF useful. https://github.com/mpdf/mpdf.
There is good documentation https://mpdf.github.io/ and even some examples in another GitHub repository https://github.com/mpdf/mpdf-examples.
You can use html and css to generate a nice looking PDF.

Related

How to display a user-uploaded PDF in React using FilePicker from 'react-file-picker'?

My goal is to allow the user to upload a pdf from their file explorer, and upon clicking a button that says 'view', they'll be able to see that PDF file.
I'm currently using react-file-picker to upload files, but that doesn't seem to work.
I know someone is going to comment, "Look it up", or something like that, but I have. All the examples that I've seen so far are only tailored to PDFs that can be found at various online URLs. I'm obviously not using URLs, but instead actual pdfs from the users file explorer.
Currently I have a method for displaying the actual button to use when uploading files, and there's a method attached to it that handles the file after it's uploaded. I need help with the handleFileChange method below so that I can show the pdf. If 'FilePicker' isn't a good option, can anyone provide me with suggestions on good React tools that will help me achieve this?
Thanks for your help!
My code for uploading a file:
Check out the documentation for pdf-viewer-reactjs. It will do what you need and looks to be simple to implement.

How can i upload a file by using the download link to the file

I am setting up a file viewer to work with another web application, and to make it more user friendly instead of making the user download and upload the file themselves, i want to pass the download link to upload(if anyone has experience with alfresco and know how to get the file itself please tell me), is there any way to do that?
You might want to take a look at the Alfresco REST API. Specifically, getNodeContent allows you to get the content on a node.
This API requires Alfresco 5.2 or higher. If you are using an older version, please specify.

static webpage change file

I'm making a simple website in GitHub pages. I have a text file in the /docs folder (I can move though) and I want to change it's content through index.html. I found a lot of back-end solutions but GitHub pages allows static webpages only. Is there a way to do so in static webpage and if so how to do it in javascript?
Since it's static pages, you can't rewrite the hosted file from the front end client. To update the text file contents, you'll need to do it through the github interface, or as a commit into your repository unfortunately
No.
Changing content on the server requires code that runs on the server.
If you could do it with client side code, then every website would rapidly become defaced.
The closest you could do would be to store data on the client (e.g. via localstorage) and then have a script on the page read that data and edit the DOM locally. Obviously, changing the data would change it only for the particular browser and not for all visitors.
There are two answers to your question:
Technically, it is possible to change files on GitHub from a script:
GitHub's API allows you to update files through an HTTP request.
You could use Javascript to modify the contents of a file, and then send a request to GitHub's API to update that file. There are a few libraries that make it really easy to work with the API, but from here you have to figure it out yourself.
Here is the documentation for this: https://developer.github.com/v3/repos/contents/#update-a-file
Conceptually, it sounds like you are doing something wrong. Static webpages are called static because nothing changes. If you want to have dynamic content, you should really look into other solutions.

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.

PebbleKit JavaScript send image to Pebble

Is it possible to send a images to the Pebble watch using PebbleKit Javascript sendAppMessage.
My idea is to load an image from the web and send it to the watch and display them there. If an image is not possible directly then I was thinking of drawing the image to a canvas and trying to get bitmap data from the canvas to send to the watch.
Is any of this possible now or am I thinking of things that have not been done yet. If possible how? If not done yet how might you do it?
Looking to brainstorm and share possible code ideas.
I should also mention that I do not want to use an iOS or Android app, only the PebbleKit JS.
There is a complete example of an app that uses JavaScript to download images in the pebble-hacks Github repository. This github projects hosts different non-official yet written by team pebble.
The one you are looking for is pebble-faces. The image download part is built in a separate source file to be easily re-used in your own project.
I also added a PHP port for the Python script here
https://github.com/logbon72/pebblebitmap
It might come in handy if your run PHP applications that need to do conversion on the fly.

Categories

Resources