{"action":"created","issue":{"url":"https://api.github.com/repos/bpampuch/pdfmake/issues/907","repository_url":"https://api.github.com/repos/bpampuch/pdfmake","labels_url":"https://api.github.com/repos/bpampuch/pdfmake/issues/907/labels{/name}","comments_url":"https://api.github.com/repos/bpampuch/pdfmake/issues/907/comments","events_url":"https://api.github.com/repos/bpampuch/pdfmake/issues/907/events","html_url":"https://github.com/bpampuch/pdfmake/issues/907","id":213707165,"number":907,"title":".download() and .open() throws error \"images dictionary should contain dataURL entries\" in Chrome","user":{"login":"bhagyamaheshi","id":11424014,"avatar_url":"https://avatars3.githubusercontent.com/u/11424014?v=3","gravatar_id":"","url":"https://api.github.com/users/bhagyamaheshi","html_url":"https://github.com/bhagyamaheshi","followers_url":"https://api.github.com/users/bhagyamaheshi/followers","following_url":"https://api.github.com/users/bhagyamaheshi/following{/other_user}","gists_url":"https://api.github.com/users/bhagyamaheshi/gists{/gist_id}","starred_url":"https://api.github.com/users/bhagyamaheshi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bhagyamaheshi/subscriptions","organizations_url":"https://api.github.com/users/bhagyamaheshi/orgs","repos_url":"https://api.github.com/users/bhagyamaheshi/repos","events_url":"https://api.github.com/users/bhagyamaheshi/events{/privacy}","received_events_url":"https://api.github.com/users/bhagyamaheshi/received_events","type":"User","site_admin":false},"labels":[{"id":212856641,"url":"https://api.github.com/repos/bpampuch/pdfmake/labels/waiting%20for%20information","name":"waiting for information","color":"f7c6c7","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-03-13T09:03:19Z","updated_at":"2017-03-14T03:21:20Z","closed_at":null,"body":"I am using pdfmake.min and vfs_fonts in my application to print a 4 page pdf document. The document contains 17 tables, and 18 images. All the images are converted into base64 and used in the application. I convert the images using a javascript function. \r\nCurrently am using 0.1.26 version of pdfmake. \r\nI can download the pdf file without any problem using firfox. But when I test it with Chrome I get the error **Uncaught invalid image, images dictionary should contain dataURL entries (or local file paths in node.js)** for both .download() and .open()\r\n\r\nAlso when I am using .open() in Chrome a window will open and vanish suddenly.\r\n\r\nHow to solve this issue?\r\n"},"comment":{"url":"https://api.github.com/repos/bpampuch/pdfmake/issues/comments/286310768","html_url":"https://github.com/bpampuch/pdfmake/issues/907#issuecomment-286310768","issue_url":"https://api.github.com/repos/bpampuch/pdfmake/issues/907","id":286310768,"user":{"login":"bhagyamaheshi","id":11424014,"avatar_url":"https://avatars3.githubusercontent.com/u/11424014?v=3","gravatar_id":"","url":"https://api.github.com/users/bhagyamaheshi","html_url":"https://github.com/bhagyamaheshi","followers_url":"https://api.github.com/users/bhagyamaheshi/followers","following_url":"https://api.github.com/users/bhagyamaheshi/following{/other_user}","gists_url":"https://api.github.com/users/bhagyamaheshi/gists{/gist_id}","starred_url":"https://api.github.com/users/bhagyamaheshi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bhagyamaheshi/subscriptions","organizations_url":"https://api.github.com/users/bhagyamaheshi/orgs","repos_url":"https://api.github.com/users/bhagyamaheshi/repos","events_url":"https://api.github.com/users/bhagyamaheshi/events{/privacy}","received_events_url":"https://api.github.com/users/bhagyamaheshi/received_events","type":"User","site_admin":false},"created_at":"2017-03-14T03:21:20Z","updated_at":"2017-03-14T03:21:20Z","body":"Well Its a small part of a big application. I will explain it like this.\r\n\r\nI included the pdfmake.min.js and vfs_font.js in my src/js folder. And then shim them in main.js. \r\n\r\n![d1](https://cloud.githubusercontent.com/assets/11424014/23883680/4e9219a6-089b-11e7-94dd-71097a675c8d.PNG)\r\n\r\nThen I defined it globally in the js file that I want to generate the pdf.\r\n\r\n```\r\ndefine([\r\n    'jquery',\r\n    'views/base/view',\r\n    'config/config',\r\n    'config/Queries',\r\n    'config/events',\r\n    'i18n!nls/countryProfiles',\r\n    'text!templates/countryProfiles/profile.hbs',\r\n    'handlebars',\r\n    'fx-chart/start',\r\n    'pdfmake.min',\r\n    'vfs_fonts',\r\n    'amplify'\r\n], function ($,View, C, Q, E, i18nLabels, template,Handlebars,Chart) {\r\n```\r\nOne picture that is using in the application is a country flag. I convert it to base64 using the following function. Same with the other 17 images.\r\n\r\n```\r\ntoDataUrl(flag,function(base64Image){\r\n                 flag_pdf.push(base64Image);\r\n              });\r\nvar image = _.range(1,18,1);\r\n_.each(image,function(obj){\r\n                  var goal_image = 'src/images/escap/'+obj+'.png';\r\n                  toDataUrl(goal_image,function(base64Image){\r\n                     flag_pdf.push(base64Image);\r\n                  });\r\n          });\r\n```\r\n\r\nThe function toDataUrl is:\r\n\r\n```\r\nfunction toDataUrl(file,callback) {\r\n           var xhr = new XMLHttpRequest();\r\n              xhr.responseType = 'blob';\r\n              xhr.onload = function() {\r\n             var reader = new FileReader();\r\n             reader.onloadend = function() {\r\n              callback(reader.result);\r\n           }\r\n             reader.readAsDataURL(xhr.response);\r\n          };\r\n           xhr.open('GET', file);\r\n           xhr.send();\r\n           }\r\n```\r\n\r\nThen the data required for the tables are read through an ajax call and assigned to 17 arrays. \r\n\r\n```\r\nvar dataUrl = baseUrl+\"SDG_PROFILE_\"+self.country_id+\".json\";\r\n                $.ajax({\r\n                  async: false,\r\n                  dataType: 'json',\r\n                  url: dataUrl,\r\n                  contentType: \"application/json; charset=utf-8\",\r\n                  type: 'get',\r\n                  success:function(res){\r\n                    Goal1 = res.Goal1.data;}\r\n            });\r\n```\r\n\r\nThe json data is:\r\n\r\n```\r\n\t\"Goal1\" : {\r\n\t\t\"data\" : [\r\n\t\t\t{\r\n\t\t\t\t\"Indicator_id\" : \"1.1.1\",\r\n\t\t\t\t\"Indicator_name\" : \"Population living in poverty at $1.90 a day in 2011 PPP 2016 (% of population)\",\r\n\t\t\t\t\"Earliest\" : \"-\",\r\n\t\t\t\t\"Latest\" : \"-\"\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"Indicator_id\" : \"1.1.1\",\r\n\t\t\t\t\"Indicator_name\" : \"Share of extremely poor living on less than  US$1.90 a day in total employment, total (% of total employment), 2005\",\r\n\t\t\t\t\"Earliest\" : \"78.56\",\r\n\t\t\t\t\"Latest\" : \"-\"\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"Indicator_id\" : \"1.2.1\",\r\n\t\t\t\t\"Indicator_name\" : \"Population living below the national poverty line 2016 (% of population), 2007, 2011\",\r\n\t\t\t\t\"Earliest\" : \"36.3\",\r\n\t\t\t\t\"Latest\" : \"35.8\"\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"Indicator_id\" : \"1.3.1\",\r\n\t\t\t\t\"Indicator_name\" : \"Social health protection (% of population)\",\r\n\t\t\t\t\"Earliest\" : \"-\",\r\n\t\t\t\t\"Latest\" : \"-\"\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"Indicator_id\" : \"1.5.1+\",\r\n\t\t\t\t\"Indicator_name\" : \"Disasters, people affected (Thousands per annum), 2000, 2015\",\r\n\t\t\t\t\"Earliest\" : \"2582\",\r\n\t\t\t\t\"Latest\" : \"26.57\"\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"Indicator_id\" : \"1.5.1+\",\r\n\t\t\t\t\"Indicator_name\" : \"Disasters, deaths (Per million population), 2000, 2016\",\r\n\t\t\t\t\"Earliest\" : \"30.15\",\r\n\t\t\t\t\"Latest\" : \"2.008\"\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"Indicator_id\" : \"1.a.2\",\r\n\t\t\t\t\"Indicator_name\" : \"Public expenditure on education (% of total government expenditure), 2010, 2014\",\r\n\t\t\t\t\"Earliest\" : \"22.24\",\r\n\t\t\t\t\"Latest\" : \"18.4\"\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"Indicator_id\" : \"1.a.2+\",\r\n\t\t\t\t\"Indicator_name\" : \"General government health expenditure (% of government expenditure), 2002, 2014\",\r\n\t\t\t\t\"Earliest\" : \"8.987\",\r\n\t\t\t\t\"Latest\" : \"12\"\r\n\t\t\t}\r\n\t\t]\r\n\t}\r\n```\r\n\r\nA separate array is created for each table that will be used in the pdfmake document definition. \r\n\r\n```\r\n  $('#goal1_table').html('<tr><td class=\"col-md-1\"></td><td class=\"col-md-3\"></td><td class=\"col-md-1\" style=\"text-align: right;\">'+\r\n              'Earliest</td><td class=\"col-md-1\" style=\"text-align: right;\">Latest</td></tr>').show();\r\n              var goal1_data = [['','','Earliest','Latest']];\r\n\r\n              _.each(Goal1,function(obj){\r\n                var Indicator_id = obj.Indicator_id;\r\n                var Indicator_name = obj.Indicator_name;\r\n                if(obj.Earliest != '-'){\r\n                  var earliest_data = parseFloat(obj.Earliest).toFixed(1);\r\n                }else{\r\n                  var earliest_data = obj.Earliest;\r\n                }\r\n                if(obj.Latest != '-'){\r\n                  var latest_data = parseFloat(obj.Latest).toFixed(1);\r\n                }else{\r\n                  var latest_data = obj.Latest;\r\n                }\r\n\r\n                $('#goal1_table').append('<tr><td>'+Indicator_id+'</td><td>'+Indicator_name+\r\n                '<td style=\"text-align: right;\">' +earliest_data+ '</td><td style=\"text-align: right;\"> '+latest_data+' </td></td></tr>').show();\r\n\r\n                goal1_data.push([Indicator_id, Indicator_name,{text: earliest_data, alignment:'right'},{text: latest_data, alignment:'right'}]);\r\n              });\r\n```\r\n\r\ngoal1_data is the array that is used in the document definition. And my document definition is:\r\n\r\n```\r\n          var docDefinition = {\r\n            info: {\r\n              title: 'Country Profile',\r\n              author: 'UNESCAP Statistics Division'\r\n            },\r\n            footer: function(currentPage, pageCount) { return currentPage.toString() + ' of ' + pageCount},\r\n            header: function() {\r\n                  return { text: '2017 Asia-Pacific SDG Partnership',\r\n                  alignment: 'right',\r\n                  italics: true,\r\n                  fontSize: 6,\r\n                  margin: 10};\r\n              },\r\n              content: [\r\n              {columns:[\r\n                {\r\n                  width:'*',\r\n                  text: 'SDG Profile - '+ self.country_name , style: 'header',margin: 5\r\n                },\r\n                {\r\n                  width:50,\r\n                  height:28,\r\n                  alignment:'right',\r\n                  image: 'flag'\r\n                }\r\n              ]},\r\n              {\r\n                columns:[\r\n                  {\r\n                    width:30,\r\n                    height:30,\r\n                    alignment:'left',\r\n                    image:'goal1'\r\n                  },\r\n                  {\r\n                    width:'*',\r\n                    text: 'Goal 1 : No Poverty',\r\n                    style: 'goalheader'\r\n                  }\r\n                ]},\r\n              {\r\n                table: {\r\n                  headerRows: 1,\r\n                  widths: [ '10%', '*','15%', '15%'],\r\n                  body: goal1_data\r\n                }\r\n              }\r\n            ],\r\nimages: {\r\n              flag: flag_pdf[0],\r\n              goal1:flag_pdf[1],\r\n              },\r\n              styles: {\r\n                header: {\r\n                fontSize: 22,\r\n                bold: true\r\n              },\r\n              goalheader:{\r\n                fontSize: 18,\r\n                margin:5\r\n              },\r\n              tableHeader: {\r\n                fontSize: 8\r\n              }\r\n            }\r\n        }\r\n```\r\nFinally I call the .download() method in a on.('click') event of a button.\r\n```\r\n$('#profile').on('click',function(){\r\n           pdfMake.createPdf(docDefinition).download('SDGProfile.pdf');\r\n           /*if(isFirefox == true){\r\n             pdfMake.createPdf(docDefinition).download('SDGProfile.pdf');\r\n           }else{\r\n             pdfMake.createPdf(docDefinition).open();\r\n           }*/\r\n\r\n      });\r\n```\r\n\r\nThe code sinnept in comment I tried to detect the browser type and then vary the function .dowload() and .open(). The final output that I get from FF is look like follows.\r\n\r\n![d2](https://cloud.githubusercontent.com/assets/11424014/23884341/aa6f7518-089e-11e7-8ec2-92e6c5a2580b.PNG)\r\nI hope this explains you how I sued it in my application. "}}
{"actor":{"display_login":"bhagyamaheshi"}}