search

cesarvr / pdf-generator

Cordova plugin to generate pdf in the client-side
MIT License
107 stars 61 forks source link

Css and html tags are not implemented on pdf generated in vue ionic #137

Open bilalswiftsolutions opened 2 years ago

bilalswiftsolutions commented 2 years ago

I am using this ionic package to generate pdf file 

https://github.com/cesarvr/pdf-generator

Pdf is generating but it seems like html tags and css is not applied on pdf it seem broken

enter image description here

I am generating pdf like that. I am getting outer html of vue component and then generating pdf from that but thats not happening correctly

 let options = {
        documentSize: "A4",
        type: "share",
        fileName: "myFile.pdf",
      };
 console.log(this.$refs.order.$el.outerHTML)
      PDFGenerator.fromData(`<html lang="en"><head></head><body><div id="app">${this.$refs.order.$el.outerHTML }</div></body></html>`, options)
        .then(() => "ok")
        .catch((err) => console.log(err));
MadeInFck commented 2 years ago

Works fine for me:

const options = {
    documentSize: "A4",
    fileName: "devis.pdf",
};

export const shareFromData = async (action: string, data: object) => {
    PDFGenerator.fromData(createHTML(data), {
        ...options,
        type: action,
    })
        .then(() => console.log("PDF généré!"))
        .catch((err) => console.log(err));
};

Function createHTMLjust returns some html code where I inject dynamic data via variable nesting using ${}. However, I'm unable to add image using imgtag and srcattribute.

VedantS20 commented 1 year ago

I appended the component styles using the style tag in the string which we are passing as pdfContent , it worked for me

const options = {
            documentSize: "A4",
            type: "share",
            fileName: "myFile.pdf"
          };
          console.log(this.$refs.order.$el.outerHTML);
          PDFGenerator.fromData(`<style>.container{background:red}<style/>${this.$refs.order.$el.outerHTML}`, options)
            .then(() => "ok")
            .catch((err) => console.log(err));

and for the images you can use an public url