jspdf change dpi to 300 use mm in javascript

You can change the resolution (dpi) of JSPDF by modifying its internal canvas element. Here's an example code snippet:

index.tsx
// create jspdf instance
var doc = new jsPDF();

// modify internal canvas dpi
var dpi = 300; // desired dpi
var mmInch = 25.4; // 1 inch = 25.4 mm
doc.internal.scaleFactor = dpi / 72; // 1 pixel = 1/72 inch
doc.internal.pageSize.getWidth = function() {
  return this.width / this.scaleFactor;
};
doc.internal.pageSize.getHeight = function() {
  return this.height / this.scaleFactor;
};

// add content
doc.text("Hello, world!", 10, 10);

// save pdf document
doc.save("example.pdf");
486 chars
20 lines

In this example, we're setting the desired DPI to 300 and converting it to pixels per inch (1 inch = 72 pixels in JSPDF). Then, we're modifying the getWidth and getHeight functions of pageSize to return the page dimensions in millimeters (which is the standard unit of length in JSPDF). Finally, we're adding some content to the PDF and saving it.

Note that changing the DPI will affect the output file size and the rendering quality of images, so choose a DPI that meets your requirements. Also, keep in mind that not all browsers may support this feature, so test your code thoroughly.

related categories

gistlibby LogSnag