grey/Web-Printing-Toolkit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
Web-Printing-Toolkit/README.md

2.4 KiB
Raw Permalink Blame History

Web-Printing-Toolkit

This is a very minimal demo of how to print from a browser via IPP. This is used to "bypass" the browsers printing dialog in scenarios where it might cause issues (like kiosk applications). This demo allows you to enter a text and it will be written onto a canvas of 400px by 400px. Clicking "Print now!" will start a print job. You can check the console for more details.

Components

  • A print server, I use CUPS which runs on Linux and MacOS
    • If you need support for Dymo printers (i.e. label printers) consider using dymo-cups-drivers
  • A printer (or PDF printer)

Issues

Sending a print-request from the browser is "simply" sending a web request to the print server. In most cases the print-server is on a diffrent host and port then the web ui, this will lead to a CORS error. This can be fixed in two ways:

  1. Append a Access-Control-Allow-Origin: * header to the servers response (CUPS however does not support this)
  2. Run a reverse proxy like nginx to have the UI and print server on the same origin
    • When running this make sure to not pass the clients Host Header to CUPS, it will reject the print job. Instead use 127.0.0.1
    • Make sure that your setup is secured or isolated (network wise)

How it works

The basic promise is quite simple. The browser generates a graphic and sends a request to the IPP server. This is possible as IPP is simple a structured web request with a binary payload. Getting it to work though is not quite that simple (except if you get started with this toolkit). Here is an outline of the basic flow:

  1. The browser generates a graphic, in this case using a canvas
  2. Using canvas.toBlob a binary blob of the canvas gets created
  3. The blob gets converted into an ArrayBuffer using a FileReader
  4. A message gets created. It contains the Buffer as data and an operation-attributes-tag which decides the document format
  5. The finished post request gets sent to the printing server using AXIOS
  6. Brrrr The finished print should be dispensed by the printer

If this project helped you, please consider donating to support my work!

ko-fi