how can I generate a PDF with React that accepts styling and allows me not to show the content on the page? I want to display a link (probably an a tag) on my app that generates a PDF and shows it instantly on a new tab. I have tested the following packages and here's my take on them: (I can't find a method to fit my needs).
#react-pdf/renderer: Does the job but has a couple drawbacks: 11s loading time (source: Bundlephobia) and uses primitives (View, Image, Text) so the styling is a bit different.
jsPDF: Awesome library but doesn't support CSS. Its styling is too declarative and repetitive. (If someone could explain how to handle my situation with this styling it would be more than welcome!)
html2canvas: Used in conjunction with jsPDF. This method first takes a screenshot of the page, then generates a PDF with the newly created image (jpg or png). Really usefull, but in this case it throws me an error when I don't show in the page the actual 'things' I want to show in the PDF, and, as I tell you, my goal is to only displaythe a tag.
So what's your take on this? What should I do?
Thanks a lot!
Google's Puppeteer is a Node API that allows you to control an instance of Chrome using a Node service. Leveraging this technology, you could generate PDFs using any Javascript framework ( React included ).
For detailed step-by-step guide see: https://www.pdftron.com/blog/react/react-to-pdf
And the related open-source project https://github.com/PDFTron/web-to-pdf
I use pdfMake in my backend and display the pdf with google doc:
<iframe
title="title"
src={`https://docs.google.com/gview?url=${docUrl}&embedded=true`}
style={{ height: "100%", width: "100%" }}
/>
Loading time is also a bit of an issue here. Are you trying to convert HTML directly to a PDF?
I found this library - pdfmake. It allows us to design pdf and it have it's own styling and we can dynamically pass the data using this library. I implemented this in ReactJS.
Related
I am generating a pdf using react-pdf library.
Everything seems to be working fine but I can't make the Link element from #react-pdf/renderer to work properly.
const add_hyperlink = (url_text: string) => {
return <Text><Link src={url_text}>{url_text}</Link></Text>;
};
In the pdf document, it appears as a link should and even the pointer changes on hover, on clicking the link, in chrome nothing happens, while in adobe reader, it results in a security block.
I tried to use an <a> tag instead, but it resulted in the same output.
Does someone know how to resolve this? Thanks.
EDIT:
Something I realized while researching on this. Noting down because it is easy to get confused with the tiny differences.
library #react-pdf/renderer is used to create pdfs in react.
library react-pdf is used to display existing pdf in a react app.
There were several mentions about using annotation options and including "import 'react-pdf/dist/Page/AnnotationLayer.css';" which made links appear properly for many developers. However this belongs to react-pdf library and will only work if it is needed to render pdf within the react-app.
In this case, I am creating a new PDF with #react-pdf/renderer but I am generating a link to download the generated PDF file (https://react-pdf.org/advanced#on-the-fly-rendering).
I found the solution to my problem as well.
The link I was using is supposed to redirect to another url, and hence the problem. I used the final link in src and then it works smooth.
I hope these observations are of help to someone in the future :)
I want to make a feature using vuejs jsust like MS word to edit PDFs. How can I make such pdf editor with vuejs in which I can add my own customization logic?
e.g.
Feature should be able to do things like
Adding conditional replace text
Adding tags to text within pdf
Change background color of text.
This would be a fairly major project. Perhaps you should look for libraries already built, read through issues on Github and project documentation to get a sense as to how these products are built.
There are only a handful of packages in the 'awesome vuejs' library that deal with PDF viewers. No PDF creators that I can see; it's probably very hard to do.
This one has 1700 stars and is not recently active, meaning there may not be a lot of people actively working on the custom PDF editor space. This may be the largest in the Vue community for viewing, not editing.
https://github.com/FranckFreiburger/vue-pdf
Take a look at this curated list for inspiration in various UI areas:
https://awesome-vue.js.org/components-and-libraries/ui-components.html#pdf
Best of luck to you,
Marcus
I am looking for a visual HTML editor script that works in browser basically. Its initial content will be generated from an existing URL and all the changes which will be done by the user, should be exportable in some kind of format. The aim here is reaching the final look later by applying this exported data.
The user here will be non-technical end user. The editor can be similar to WYSIWYG so user can switch between preview and code. The editor should not rely on some kind of special CSS/JS frameworks, it should be able to read from CSS and JS files directly from URL while generating the page.
There are lots of visual editors out there with lots of cool stuff. Some are using drag-and-drop UI elements, some are meant to work just with Bootstrap etc. But so far I could not find something I can use.
So if existing tools are not enough, I need to find a way of generate same result by comparing the outputs.
Beside taking diff of the contents, is there any method for generating the exportable changes for reapplying to initial HTML later?
using diff may actually work but it may generate lots of bugs while working with js frameworks
If you are looking for what I think then.. https://ckeditor.com/ Check this one. I have used this HTML editor in a website. It changes the initial HTML and works like the way wordpress HTML editor works.
I am looking for some general advice on where to start with a project. I am working on a journal website which will display a handwritten journal with the ability to switch between a typed transcript version via a switch button. I am coding the website from scratch and working within php.
It will be around 70 pages long.
Have the ability to switch between the pages via arrows or by typing in a page number.
A switch that switches between the handwritten version and the typed transcript.
I have included some annotations of my designs below to give some more details of what I would like to achieve.
Is there some kind of framework available that allows for embedding multiple page pdf into a site that I can then work from to achieve the ability to switch between the handwritten and transcribed version
I am a bit stuck on where to start - I am more of a designer :)
Thanks for taking your time to read
Nina :)
The most common JS framework to embed PDF files in a webpage is pdf.js, you can find a demo here https://mozilla.github.io/pdf.js/web/viewer.html. I have not used pdf.js but I don't think it allows for editing the PDF content, like the style and fontface. So you could create 2 pdf files, a handwrittin and a plain pdf and just switch the viewed files around with a button, or try styling the pages in HTML/CSS and not PDF's. If you are not that experienced with CSS I would recommend the former.
Hope it helps.
Edit: I am not sure if a clickable popup is possible inside of a PDF, if this is an important feature, you may have to choose the HTML/CSS path instead of the PDF path.
I would like to create a custom qr code with javascript that contains a logo in the middle.
I already found this project on github:
https://github.com/kaarposoft/qrlogo
but unfortunately this script creates 1000 qr codes, whereupon the logo is always positioned differently, apart from that this project is not really easy to handle. (no documentation etc). I have rewritten in such a way that only one qr code is generated and not more than one and also that it uses an img tag instead of waiting for an upload. Nevertheless, this is not optimal because the logo is always randomly on the qr code and it is a project and not a library.
So I would like to know if someone knows a library or has programmed something to generate a qr code with javascript from an img tag and a string.
Many greetings and thanks.
qrcode-with-logos does the trick for me. I also came across easyqrcodejs which has a lot of extra features, though I have not yet used it myself.
Checkout the Zebra Crossing project.
It has ports to many languajes, including javascript.
zxing project on GitHub