# 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](https://www.cups.org) which runs on Linux and MacOS
  - If you need support for Dymo printers (i.e. label printers) consider using [dymo-cups-drivers](https://github.com/matthiasbock/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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS/Errors) error.
This can be fixed in two ways:
1. Append a `Access-Control-Allow-Origin: *` header to the servers response ([CUPS](https://www.cups.org) however does not support this)
2. Run a reverse proxy like [nginx](https://nginx.org) 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](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/D1D5O05AX)