I'm really curious as to how sites like RightSignature and PandaDoc provide the drag and drop capability on a PDF. Basically, you upload a PDF to their site, then they display the PDF in a window (all the pages -- scrollable), then they have a panel on the side of the PDF viewer that has one to many form fields in it and the site allows you to drag those fields onto the PDF as placeholders.
I get that they are basically just recording the X/Y coordinates of where the form element is being placed. But how do are they actually accomplishing this from a technical perspective?
I know how to handle the PDF upload. I just don't know how to display the PDF and basically create an overlay that allows the user to drag fields onto it and record the x,y coordinates. This way when I want to create a version of that template, I know where to put the fields on the PDF.
Even if this question is quite old, I share my solution realized using the following libraries:
pdf.js (that renders a PDF file as an HTML component allowing the capturing of coordinates)
interact.js (for the drag and drop of placeholders)
Check my solution pushed to GitHub https://github.com/ValerioEmanuele/drag-and-drop-placeholders-into-PDF
Related
I have a website that allows people to create matchups guides in video games. In order to create a matchup guide you have to drag specific cards in designated slots to which you would then add helpful text and then upload the "matchup" which consists of the dragged images. I want to upload these images to an sql database which is then placed on a seperate page which displays the put together matchup. but adding the full image on each user upload feels impractical. Is there a way to only send a representation of the image in the form of something like Var which can then be represented on the next page as an image. Thanks.
Technologies: front-end -> Angular 9, back-end -> JAVA.
Description: I am using angular to create dashboard with moderately complex DOM structured with embedded css styling and also is responsive. Complex means, there are 4 tabbed-panes with 4-8 SVG graphs in each tab in one dashboard. Dashboard also comprises of few images (some are from different domain and some are from same file system). For sake of optimization, I draw graph using API responses only when tabs are clicked to show results. So request parameters while navigating from parent view is stored using Angular route navigation states in order to request other apis to generate graphs.
I have already tried jsPDF, PDFmake, htmlPdfMake, html2pdf libraries but all these libraries has one or the other limitations not fit to my requirement. For e.g. jsPDF (.html(), .fromHtml()) don't consider embedded with CSS and only feeds textual contents (excludes svg) into PDF file. Other ways to create image out of html body using html2canvas and then converts image to pdf which makes text non-selectable. Pdfmake has complex ways but again requires additional limited css styling separately and so on.
Then I use traditional way to window.print() which does gives selectable text, also the text inside graphs are selectable the way I needed, but drawback is my dashboard is responsive and when the graphs are generated, the SVG dimensions remains fixed. So when window triggers print(), the default A4 size paper setting adjust the view to lower device viewport (say, tablet) due to its responsiveness but size of SVG graphs remains the same which looks weird (imagine, graphs aligns to the left leaving extra space on its right-side). This was fixed by creating separate view and remove responsiveness from that view and trigger window.print(). But this solution forcing me to show the view on client-side getting graphs generated and then download to PDF using window.print(). However this solution does not satisfies my client's requirement and asking me to hide newly re-generated view but instead agreed to show view in new window tab and add the ability to download to PDF (like PDF viewer or similar) but disagreement on window.print(). Currently some how I succeeded to show only one view on browser's new tab using BLOB or document.write(). Now from here I need guidance on how to proceed in order to achieve below requirement.
Requirement: To generate HTML content to PDF doc.
1) Open new browser tab and generate graphs combining all 4 tabbed panes (this should include taking request argument from state and make api calls).
2) Once all 4 views are ready with all the graphs generated and images at its expected place, then allow exporting entire view into PDF with Styling exactly what we see on browser
3) PDF must have proper margin and include title, link and logo at the bottom.
4) Client-side approach only.
5) Must have each text selectable inside the PDF document.
Questions:
1) What are the other approaches that can fulfill above requirements. If it includes server-side, then how?
2) Whether the current approach(on client-side) is doable considering above requirements, if not then why?
I would like to make an image viewer that can display multiple images in a document format. Basically my web application server right now is sending me an array of base64 png files that I need to display in a viewer that looks like a document. A good example for my requirements would be the following picture:
Also I should be able to animate the pages by rotating them, moving the page from one place to another or deleting a page by either clicking on the thumbnail or scrolling through the page and performing the necessary action. Currently my frontend imageviewer looks like this:
Which is mostly for testing purpose but I would prefer it looks more like the first example Image. Is there any library that can help me with this or any suggestion on how to start about it. Any advice would be grateful!.
Thank you!
I am trying to make a seamless process for creating engineering part drawings that have interactive balloons that will somehow go to the part you clicked. A part balloon contains a part number, I want the user to be able to click that part number to go to that selected part number drawing.
What I am asking help for is if anyone knows or has any recommendations how to achieve this.
We use Solidworks as our CAD software. Currently we create save a copy of the drawing in Solidworks to PDF and that is then converted to an enlarged PNG programmatically. There are currently no hooks, anchors or tags associated with the PNG. The PNG is displayed on our parts browsing website. Currently you cannot interact with the drawing on the webpage other than zooming in and out.
I can change that process to whatever will work, but it needs to be almost completely automated. Any ideas would be appreciated.
So far I have looked into adding JavaScript to the actual PDF document programmatically, but I do not fully understand the interaction between web based JavaScript and PDF JavaScript. There is not much online either, or else I couldn't find it. I have also looked into adding links to the PDF, but i cannot get it to open in the current iFrame when a user clicks a link on the PDF, where i would normally user target="_self" to mitigate this.
Please let me know if I can clarify something, as there is a lot of information and it would be overwhelming to write on here.
This the scenario: A user enters data into an online form, the server does some calculating and inserts the results into a given PDF source file using mPDF. I realize this could be done with editable PDF forms alone, but there is more stuff going on (like generation of diagrams) -- suffice it to say I'll have to stick with mPDF for now.
Until now I have been positioning the text on the PDF manually (measuring the offset in InDesign) but I always thought there had to be a way to do this more efficiently.
What I have in mind:
I open the PDF source file in the browser (e.g. using pdf.js), create boxes at the positions I'd like to draw on and then calculate their absolute position, width, height (see image below) This data I can then easily use to generate the needed html/css output for mPDF.
.
I wanted to check if anyone had a better idea to achieve this goal before I started diving into pdf.js. Thanks in advance.