I have a visualization generated by d3 (a javascript visualization library similar to Protovis or Raphael, which draws stuff using SVG elements). The vis is interactive, so the user can interact with and edit it. Once the user is satisfied with his/her visualization, I would like the user to be able to export this visualization as a PDF. I've tried several HTML to PDF libraries and they don't work with SVG elements.
It is okay if the solution is either client side or server side. I'm using PHP server side but Python or Java implementations might also work.
Browser support: Ideally it would support all modern browsers, but minimally I'd like to support latest versions of both Firefox and webkit browsers.
I do not know of any strong PDF libraries on the client side.
A quick possible way would be to send the svg content to a server, and use something like batik for java to turn the svg to pdf and then send the response to the client again.
Here is a related SO for the converstion.
There's also wkhtml2pdf, which can render anything webkit can as a PDF. If you want to render a combination of SVG and HTML, or want to have some JavaScript run before the PDF snapshot is taken, it's great for that.
http://code.google.com/p/wkhtmltopdf/
PhantomJS can also rasterize url/html to PDF. Same backend (QTWebKit) with wkhtml2pdf.
I did not try d3, but I achieved the effect you are looking for like this in Python3.6:
# Pdf library
from reportlab.pdfgen import canvas
from reportlab.graphics import renderPDF, renderPM
# Svg library
import svgwrite
# Svg to reportlab
from svglib.svglib import svg2rlg, SvgRenderer
# Xml parser
from lxml import etree
# Create the svg
dwg = svgwrite.Drawing('test.svg', profile='tiny')
dwg.add(dwg.line((0, 0), (10, 10), stroke=svgwrite.rgb(10, 10, 16, '%')))
dwg.add(dwg.text('Test', insert=(0, 0.2)))
# Create canvas for pdf
c = canvas.Canvas("output.pdf")
# Parse the xml of the svg
parser = etree.XMLParser(remove_comments=True, recover=True)
root = etree.fromstring(dwg.tostring())
# Render the svg itself
svgRenderer = SvgRenderer()
drawing = svgRenderer.render(root)
# Now render the drawing in the pdf
renderPDF.draw(drawing , c, 10, 10)
# End page and save pdf file
c.showPage()
c.save()
# Or render to a seperate png
renderPM.drawToFile(drawing, "file.png", fmt="PNG")
Reportlab is an open source pdf library and svglib is a library that is able to convert svg's to reportlab Drawings. Rendering svg's directly from the xml is not supported out of the box, that is why I use the SvgRenderer.
Related
I am trying to add three.js based 3D objects to a PDF page. It seems there are no direct exporters available to do that. So I am trying to do the below thing,
Convert the gltf/stl/obj files to U3D files
Add the .u3d file to PDF page.
I am trying to do the below process and I am not sure whether this approach is possible. It will be a great help if there is any support available to do any one of the below conversions. Also if you know any other possible approaches, kindly update me!!
Input formats output format
GLTF
OBJ U3D
STL
(any
three.js supported
3D formats)
Thanks.
There are few options available to export the three.js graphics to a PDF ( static content not a dynamic U3D assets)
Static contents
Get the rendered data from the three.js webGL renderer / canvas renderer using toDataURL("image/jpeg"), change the MIME type to JPG/PNG and add the resulting stream as an image to PDF ( this worked for me)
example - https://plnkr.co/edit/Ty8BZaDcflCJH5tH?preview
Like the above approach we can use three.js svgrenderer to export the renderer contents into a SVG data stream, which can be added into the PDF ( textures, mesh may not be 100% reproduced)
The legacy API - "threejs-pdf-renderer" can be used to directly export the three.js animations to a PDF. We don't need any other dependencies to create the PDF. But this is a legacy API which uses legacy three.js version, lot of effort needs to be done to make the API to be compatible with the latest three.js version.
example - https://satheeshks10.github.io/ThreejsPDFGenerator/
Dynamic 3D contents
We can export the three.js animations into a U3D file (no direct support is available as for now), this U3D file can be directly embedded into PDF.
example - https://tetra4d.com/pdf-samples/
I have a webform with and want to open it on smartphone - than take pictures of some documents which need to be merged in one PDF, and on the end this file need to be uploaded to server.
My solution is to use Google Drive to upload PDF (scan) to GDrive and then somehow download this file from gdrive to server via some sort of widget (any links appreciate) installed on website.
Maybe someone have a better idea?
I know its late but my answer might help others. I also face the same challenge and implemented a custom solution based on Javascript and Since you are using web form so this solution will perfectly fits on your need.
You have to use JSPdf javascript library, JSPdf provide you pdf object in your browser and you can upload it download it and there are many other thing to play with.
First you have to initialize JSPdf object as per your requirement. I am creating PDF with page size width:500px and height 500px.
pdf = new jsPDF("l", "pt", [500,500]);
Simply when you will take picture from camera you will have each picture in form of base64, that base64 format you have to insert in JSPdf object
pdf.addImage(imgData, 'JPEG', 0, 0);
you can repeat the above code to add pictures from camera as much as you want, at the back-end these images are compiling and creating pdf document where each page have each images in sequence.
Once you are done, you can get PDF object in form of base64 object using below code that you can upload to any server.
pdf.output('datauristring')
above is only pdf part, you can find complete working example including camera part here Javascript Component to Scan Document
I am programming in Python, but if some tool/library exists in another language that would help me considerably, I am open to suggestions.
I have a large collection of pdf pages that live in a database, and I am trying to automate the collection of those pages to build some image recognition models with them.
These "pdfs" are actually just PNG images encased with a PDF wrapper (presumably so they can be read by PDF readers like Adobe Acrobat). I need the pdfs in image format to feed into the image recognition model pipeline. I am assuming they are PNG images, because when I save the images from the browser (i.e., right click and save image as), the resulting file is a PNG file.
After reading this question from 2010, and checking out this blog post from 2007, I've concluded that there must be a way to just extract the PNG byte array from the PDF instead of re-converting the PDF into a new image. Oddly though, I couldn't find the PNG file header with
#Python 3.6
header = bytes([137, 80, 78, 71, 13, 10, 26, 10])
#the resulting header looks like this: b'\x89PNG\r\n\x1a\n'
file.find(header)
Does that mean that the embedded image is not in fact a PNG image?
If there is no easy way to extract the embedded image byte array, what tool might I use to automate the conversion of each PDF file to some image format (preferably JPEG, PNG, or TIFF)?
Edit: I know tools like ImageMagick exist for format conversions, but I'd really rather do the extraction method for the sake of learning more about these file formats.
pip install pdf2image
pip install pillow
pip install numpy
pip install opencv-python
Then,
import numpy as np
from pdf2image import convert_from_path as read
import PIL
import cv2
#pdf in the form of numpy array to play around with in OpenCV or PIL
img = np.asarray(read('path to the pdf file')[0])#first page of pdf
cv2.imwrite('path to save the image with the file extension',img)
We are building a web app where the user can make a design by using fabric.js and at the end he should receive a pdf file with his work.
At first, we tried to use JSPDF because it was prefered to have a cliente-side solution. However by doing pdf.addImage(canvas.toDataURL(),...) we are rasterizing the design.
In second place, we tried server side solution using WKHTMLTOPDF, sending canvas.toSVG(), but there are some issues with fonts and shapes rendering.
The designs are complex as they can have text, shapes, images and svg.
We also tried INKSCAPE (inkscape --without-gui --export-pdf ...), MPDF and MUPDF without good results. IMAGEMAGICK is not a solution has it also rasterize the design.
The main goal is to get a vector pdf, where it's possible to increase size and where the elements of the design are selectable, and if possible that pdf should be ready to print (300 dpi and cmyk)
Yes its possible using TCPDF library.
Please check this ImageSVG api for more information for converting SVG to PDF.
https://tcpdf.org/examples/example_058/
Export the canvas to svg and use pdflib to make the pdf.
You can find an exemple here:https://www.pdflib.com/pdflib-cookbook/graphics/starter-svg/
I'm looking for suggestions on exporting PHP Charts to PDF format.
I am currently using Flot Chart. I have got all my charts working perfect I only need to exporting them to PDF. Any idea please?
Thank you,
Zina
Flot Chart is a client side solution for charts, so you would need to use javascript PDF library such as jsPDF to export image to PDF; Or you can serialize image and post back to server side using base64 or other binary to text encoding methods, then you can process the image however you want once images are sent to server side. If you use PHP, you can use FPDF. Personally, I prefer the later.
PHP Chart has code snippets demonstrates the later approach sending data to server side for process.
URL: Export phpChart on the server side.