grey/Web-Printing-Toolkit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7b45a854fe79ebe60b74dfd2134bfe523b8993cd
Web-Printing-Toolkit/README.md
TheGreydiamond 7b45a854fe inital commit
2025-08-18 20:02:43 +02:00

2.2 KiB
Raw 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