pdfmake insert image

  • Hello,
    I want to use a pdfmake library. I have this library in “statics/js”
    To use it, I’ve got a button in a component that fires a method of pdfmake to generate a pdf in a new window.

    In the component (src/pages/checkListPdf.vue):

    import docDef from "./documentDefinition.js";

    Method in a component (with q-img component to check if soruce image works or not)

          generarPDF: function () {
            // change q-img src component and it works !!!
            this.foto = "statics/logo.jpg"
            // opens new window with pdf content

    PdfMake needs an object with special properties to perform the pdf conent (it’s also known as “document definition”).
    I’ve written a custom module only to build de object (“document definition”) in a “documentDefinition.js” file.


    export default function (imatge) {
    	var dd = 
    		pageSize: 'A4',
    		content: [
    		      // image: require('assets/logo.jpg'),
    		      // image: require('/statics/logo.jpg'),
    		      image: imatge,
    		      width: 150
    			text: 'This is an example\n',
    			fontSize: 30, bold: true, margin: [ 2, 240], alignment: "center"
    	return dd 

    If I do not put object image in content propety array, it works (pdf opens in a new window with the text)
    If I add the object image, then console throws the following error:

    [Vue warn]: Error in v-on handler: “Invalid image: File ‘./statics/logo.jpg’ not found in virtual file system
    Images dictionary should contain dataURL entries (or local file paths in node.js)”

    The file exists at “src/statics” and it works in the component.
    In the documentDefinition.js I’ve also tried putting…
    image: ‘statics/logo.jpg’
    image: ‘/statics/logo.jpg’
    image: ‘…/…/statics/logo.jpg’

  • This post is deleted!