I have been using the recharts library for the dashboards in a NextJs app and a new requirement came through to download tables and charts through a PDF.
On the github for the react-pdf there was an issued raised that has now been closed due to the newly release of SVG support in the package where the author states the bindings should be done separately and people have achieved this.
Solved GitHub issue: https://github.com/diegomura/react-pdf/issues/669
SVG example: https://react-pdf.org/repl?example=svg
So far I have go the PDF rendering simple content such as text. Note: to get the react-pdf to work in this sandbox you might need to open it in a new window.
https://codesandbox.io/s/simple-line-chart-forked-vifo9?file=/src/App.tsx
Related
I am reviewing the Strapi tutorial on building a blog with Nextjs with Strapi. tutorial here
They indicate that a package for the markdown format must be downloaded.
And here is where it is used:
And the result is this:
I just took a screenshot where the iframe element is not rendering. What I think is that it is necessary to use a tool that works for mdx but I don't know how.
Requirement:
I want a react document viewer for all kinds of file types (PDF, Images, Word, Video),
same as slack has a Document Viewer.
Like Slack, I am building a chat module for my react web app. In which users can upload multiple attachments (PDF, word, png, jpeg etc). I want to create a document viewer for all kinds of files similar to slack.
I googled it and came across one package - react-file-viewer
But this npm package is not updated for the last 3 years.
I came across an article in which the person said it is not going to work for React 18 Article
Does anyone have a suggestion on this?
Do I need to create my custom Viewer which uses multiple packages (Image viewer for image, npm react player for video, pdf viewer for PDF files so on ..) or is there any react npm package already present which provides the similar solution like react-file-viewer
use Google Docs Viewer. it's more stable than react-file-viewer. here's two ways to deal with this:
use Google Docs Viewer with its javascript API. trigger the viewer API when the component is mounted.
use plain <iframe /> to embed the google docs viewer.
<iframe src="https://docs.google.com/viewer?url=http://example.com/my_file.txt&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
please refer to this gist for <iframe /> usage of Google Docs Viewer.
We are having one problem while generating a link preview for our react application URL's. Actually we have the requirement to display the dynamic link preview for different URLs.
We are able to add the link preview by using open graph tags in our index.html file placed under the public folder.
But once we tried to add dynamic metadata using the "react-meta" or "helmet" package. it is successfully changing the title of the application. but links preview are not working after making these changes.
so I kindly let me know if there is any way that we can different link preview for different urls for react application. Thanks in advance.
React pdf PDFViewer generates iframe for the preview of the doc. However, on the original site of react-pdf.org, they display it in svg which is quite nice. Any idea, how to do it?
I think they used another library to display their output. I found another library named react-pdf https://www.npmjs.com/package/react-pdf. I compared these examples:
#react-pdf/renderer
react-pdf
In the HTML section for displaying pdf, both use the same class names. Moreover, regarding the documentation of #react-pdf/renderer example only shows way to generate a file using ReactPDF.render. react-pdf allows to render document as SVG.
I am trying to build a web app that allows users to upload images then select parameters for resizing and cropping. I've decided I'm going to handle the cropping with react-cropper but I can't figure out how to handle the resizing itself. Are there any packages you all would suggest? Or otherwise, can I have some advice on how to implement this in react in a way that would produce good looking images well-scaled w/ consistent aspect ratio?
I'm new to reactjs and development in general so any detailed advice on how to go about building this system would help a ton.
Thanks
react
The question will be: Will you handle the image resizing / optimising on the server or within your browser?
I recently did one project that required to manipulate DOMs in the browser and export as a new image. I was using a library dom-to-image
which can convert your React components into jpeg, png or svg. So the solution is that you handle the resizing with any React or javascript libraries like react-resizable in the browser and export the image with dom-to-image.
I hope it helps.