jsPDF - practical example for a fit-to-width shopping cart HTML page?

user_1704772 0
Viewed 135

I'm trying to implement jsPDF pdf saving in a Vue app and I'm finding it overwhelming and nearly impossible to affect any visual change in the output.

The current results are: gigantic text and huge images.

Is there a way to get it to respect any of my CSS, @mediap print or otherwise, particularly for div borders?

The docs are very deep so I'd love an example of how to take a div-based table-like layout—e.g. a shopping cart—and fit it to width. I'd also love tips on avoid content bleeding across page breaks.

I've tried doc.setFont, doc.setFontSize and other methods and nothing changes the output.

this.doc.html(document.getElementById("pdfList"), {
  callback: function (doc) {
    doc.save("Cycad Inventory");
  },
  x: 40,
  y: 40,
});
jspdf
1 Answers
 exportPDF = () => {
        const unit = "pt";
        const size = "A4"; // Use A1, A2, A3 or A4
        const orientation = "portrait"; // portrait or landscape
        const marginLeft = 30;
        const doc = new jsPDF(orientation, unit, size);

        doc.setFontSize(14);

        const title = "Report";
        const headers = [["Time", "Source", "Destination", "Protocol", "Length"]];
        const data = this.state.ipData.map(elt => [elt.time, elt.source, elt.destination, elt.protocol, elt.length]);

        let content = {
            startY: 50,
            head: headers,
            body: data,
        }

        doc.text(title, marginLeft, 40);
        doc.autoTable(content);
        doc.save(this.state.ipData.fileName);
    }

This is a code I used in reactJS. I hope this will help you to do changes to your code. Here I have declared the height, width, font sizes margins.

Admin1
Related