将浏览器窗口的打印部分打印为PDF并发送到服务器进行传真

Question

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!

Answer 1

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.