Multiple Browser Issues with html2pdf

[CameronBlandy]

Hi Erik,
Love using your tool but I am running into some issues when using the tool on different browsers. If I reference to your version of jspdf in the Vendor folder I get the following error:
Chrome:
html2pdf.js:393 Uncaught ReferenceError: jsPDF is not defined
at html2pdf.js:393
Firefox:
ReferenceError: jsPDF is not defined[Learn More] html2pdf.js:393:1
https://cosmos.surrey.ca/external/tools/SiteSelector/report/html2pdf.js:393:1
IE11:
SCRIPT5009: 'html2canvas' is undefined
File: html2pdf.js, Line: 35, Column: 1

When I reference js2pdf from the the actual build: https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js
it works fine in Chrome and Firefox but in IE I get the following error.
SCRIPT5009: 'html2canvas' is undefined
File: html2pdf.js, Line: 35, Column: 1

Do you have any insight as why this might be happening.

Cameron

[albancho]

Hi,
It looks like an import problem... did you import dependencies in your index.html, as show in the install instructions, or in your vendor bundle if you use webpack for instance... ?

[CameronBlandy]

I don’t believe I am using webpacks (I am using a downloaded version of ESRI’s Web App Builder template). Here is my html where I put the various html2pdf components. If they should be moved please let me know. Cameron CAMERON BLANDY | GIS ANALYST [COS LOGO_ email sig final] GIS Section 13450 104 Ave, Surrey, BC, V3T 1V8 T 604.591.4699 | F 604.598.5781 |www.surrey.ca [Social Media Icons_email_GREEN]<http://www.surrey.ca/12392.aspx>[Social Media Icons_City Speaks_GREEN]<https://www.cityspeaks.ca/Portal/default.aspx> [Social Media Icons_Twitter_GREEN] <https://twitter.com/cityofsurrey> [Social Media Icons_FB_GREEN] <https://www.facebook.com/TheCityofSurrey> [Social Media Icons_YT_GREEN] <http://www.youtube.com/TheCityofSurrey> [Social Media Icons_linkedin_GREEN] <http://www.linkedin.com/company/city-of-surrey> Connect, Share and Engage with your City From: albancho [mailto:notifications@github.com] Sent: November-16-17 5:40 AM To: eKoopmans/html2pdf Cc: Blandy, Cameron; Author Subject: Re: [eKoopmans/html2pdf] Multiple Browser Issues with html2pdf (#45) Hi, It looks like an import problem... did you import dependencies in your index.html, as show in the install instructions, or in your vendor bundle if you use webpack for instance... ? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#45 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AfsRxwAzzbDQp5SecSZGHpqd48GwLBjpks5s3DsjgaJpZM4QLlKV>.

[CameronBlandy]

Update. When I remove the following meta tag the application successfully loads in IE <!--<meta http-equiv="X-UA-Compatible" content="IE=Edge" />- However it crashes at the following when creating the pdf. (html2pdf.js) [cid:image009.png@01D35EDB.475FB620] [cid:image002.png@01D35EDB.BDD862C0] Any thoughts? Cameron CAMERON BLANDY | GIS ANALYST [COS LOGO_ email sig final] GIS Section 13450 104 Ave, Surrey, BC, V3T 1V8 T 604.591.4699 | F 604.598.5781 |www.surrey.ca [Social Media Icons_email_GREEN]<http://www.surrey.ca/12392.aspx>[Social Media Icons_City Speaks_GREEN]<https://www.cityspeaks.ca/Portal/default.aspx> [Social Media Icons_Twitter_GREEN] <https://twitter.com/cityofsurrey> [Social Media Icons_FB_GREEN] <https://www.facebook.com/TheCityofSurrey> [Social Media Icons_YT_GREEN] <http://www.youtube.com/TheCityofSurrey> [Social Media Icons_linkedin_GREEN] <http://www.linkedin.com/company/city-of-surrey> Connect, Share and Engage with your City From: albancho [mailto:notifications@github.com] Sent: November-16-17 5:40 AM To: eKoopmans/html2pdf Cc: Blandy, Cameron; Author Subject: Re: [eKoopmans/html2pdf] Multiple Browser Issues with html2pdf (#45) Hi, It looks like an import problem... did you import dependencies in your index.html, as show in the install instructions, or in your vendor bundle if you use webpack for instance... ? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#45 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AfsRxwAzzbDQp5SecSZGHpqd48GwLBjpks5s3DsjgaJpZM4QLlKV>.

[albancho]

Hi,

You haven't provided the relevent html code...

[CameronBlandy]

I did attach it. Trying again as a txt file. CAMERON BLANDY | GIS ANALYST [COS LOGO_ email sig final] GIS Section 13450 104 Ave, Surrey, BC, V3T 1V8 T 604.591.4699 | F 604.598.5781 |www.surrey.ca [Social Media Icons_email_GREEN]<http://www.surrey.ca/12392.aspx>[Social Media Icons_City Speaks_GREEN]<https://www.cityspeaks.ca/Portal/default.aspx> [Social Media Icons_Twitter_GREEN] <https://twitter.com/cityofsurrey> [Social Media Icons_FB_GREEN] <https://www.facebook.com/TheCityofSurrey> [Social Media Icons_YT_GREEN] <http://www.youtube.com/TheCityofSurrey> [Social Media Icons_linkedin_GREEN] <http://www.linkedin.com/company/city-of-surrey> Connect, Share and Engage with your City From: albancho [mailto:notifications@github.com] Sent: November-17-17 2:49 AM To: eKoopmans/html2pdf Cc: Blandy, Cameron; Author Subject: Re: [eKoopmans/html2pdf] Multiple Browser Issues with html2pdf (#45) Hi, You haven't provided the relevent html code... — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#45 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AfsRx9InAGFxQalZt9OMr1oSrGp-ax82ks5s3WScgaJpZM4QLlKV>. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <!--<meta http-equiv="X-UA-Compatible" content="IE=11" />--> <title>Site Selector</title> <!--<link rel="shortcut icon" href="images/shortcut.ico">--> <link rel="shortcut icon" href="/external/tools/SiteSelector/Icons/ISP_icon.png"> <!--C1B Add google font--> <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet"> <!--[if IE 8]> <link rel="stylesheet" type="text/css" href="jimu.js/css/jimu-ie.css" /> <![endif]--> <style type="text/css"> *{box-sizing: border-box;} body,html { width:100%; height:100%; margin:0; padding:0; overflow:hidden; /*C1B. Add fonts and background colours*/ font-family: 'Titillium Web', sans-serif !important; background-color: #052333 !important; } #main-loading{ width: 100%; height: 100%; text-align: center; overflow: hidden; } #main-loading #ie-note{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } #main-loading #ie-note { width: 586px; height: 253px; background-image: url('images/notes.png'); padding: 0 30px 40px 30px; font-size: 14px; color: #596679; } #ie-note .hint-title{ height: 40px; line-height: 48px; text-align: left; font-weight: bold; } #ie-note .hint-img{ background-image: url('images/hint.png'); background-position: left; padding-left: 40px; margin-top: 20px; background-repeat: no-repeat; height: 30px; text-align: left; line-height: 30px; font-weight: bold; } #ie-note span{ display: block; line-height: 14px; } #main-page{ display: none; width: 100%; height: 100%; position: relative; } #jimu-layout-manager{ width: 100%; height: 100%; position: absolute; } /*-----------------------C1B Styles for pdf print--------------------------*/ /*body,html { font-family: 'Titillium Web', sans-serif; font-size: 1em; }*/ /*#myModal .jimu-btn { cursor: pointer; min-width: 70px; display: inline-block; padding: 0 15px; padding-top: 0px; padding-right: 15px; padding-bottom: 0px; padding-left: 15px; line-height: 33px; font-size: 14px; text-align: center; vertical-align: middle; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; border: 1px solid transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }*/ .btn-execute-email.jimu-btn { cursor: pointer; min-width: 70px; display: inline-block; position: relative; line-height: 33px; font-size: 14px; width: 20%; left: 40%; bottom: 10; text-align: center; background-color: #052333; color: #FFFFFF; border-radius: 5px; font-size: 14px; text-align: center; vertical-align: middle; padding: 0 15px; } #infographics1 { padding-top: 5px; float: left; height: 230px; width: 360px; background-color: white !important; color: black !important; } #infographics2 { padding-top: 5px; height: 230px; width: 360px; padding-left: 10px; background-color: white !important; color: black !important; } #infographics3 { float: left; height: 110px; width: 360px; background-color: white !important; color: black !important; } #infographics4 { height: 110px; width: 380px; padding-left: 10px; background-color: white !important; color: black !important; } #infographics5 { float: left; height: 100px; width: 360px; background-color: white !important; color: black !important; } #infographics6 { /*display: table-cell; right:50%;*/ height: 100px; width: 380px; padding-left: 10px; background-color: white !important; color: black !important; } #infographics7 { /* float: left; */ height: 300px; width: 360px; background-color: white !important; color: black !important; } /* #infographics8 { height: 130px; width: 380px; padding-left: 10px; background-color: white !important; color: black !important; } */ #myModal .about{ padding: 0px; margin: 0px; } #myModal ul { -moz-padding-start: 20px; -moz-margin-before: 0px; -o-padding-start: 20px; -o-margin-before: 0px; -ms-padding-start: 20px; -ms-margin-before: 0px; -webkit-padding-start: 20px; -webkit-margin-before: 0px; } #myModal .trPhotos { max-height: 143px; } #myModal table { border-spacing: 0px !important } #myModal img { padding-right: 10px; } #myModal .sitePhoto { max-width: 190px; } #myModal .detailedHeader { font-size: 1em; font-weight: bold; padding-left: 10px; } #myModal .businessDetails { color: #000 !important; font-weight: normal !important; font-style: normal; font-size: 1.0em !important; /*padding-right: 10px; padding-left: 10px; padding-bottom: 10px;*/ } #myModal .underline { border: none; border-top: 1px solid #333333; margin-top: 6px; margin-bottom: 16px; position: relative; width: 45%; left: 10px; } #myModal .mainSection { position: relative; top: 15px; font-size: 1em; line-height: 15px; } #myModal .tdDemographics { height: 250px; width: 190px; position: relative; } #myModal .broker { position: relative; top: 15px; } #myModal .pdfMap { position: relative; float: right; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 9999; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ /*background-color: rgba(0,0,0,0.9); */ /* Black w/ opacity */ /*opacity: 0.9;*/ } /* Modal Content/Box */ .modal-content { background-color: #fefefe; /*margin: 15px auto; */ /* 15% from the top and centered */ padding: 35px; /*border: 1px solid #888; */ width: 816px; /* set to width of letter sized page in pixels */ /*width: 80%; Could be more or less, depending on screen size */ } /* The Close Button */ .closeModal { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .closeModal:hover, .closeModal:focus { color: black; text-decoration: none; cursor: pointer; } /*-----------------------C1B Styles for infographics--------------------------*/ /*div[id^=infographics] .BaseWidget_ContentPane {*/ #infographics1 .BaseWidget_ContentPane { margin: 0px !important; overflow: hidden !important; height: inherit !important; width: inherit !important; } #infographics2 .BaseWidget_ContentPane { margin: 0px !important; overflow: hidden !important; height: inherit !important; width: inherit !important; } #infographics3 .BaseWidget_ContentPane { margin: 0px !important; overflow: hidden !important; height: inherit !important; width: inherit !important; } #infographics4 .BaseWidget_ContentPane { margin: 0px !important; overflow: hidden !important; height: inherit !important; width: inherit !important; } #infographics5 .BaseWidget_ContentPane { margin: 0px !important; overflow: hidden !important; height: inherit !important; width: inherit !important; } #infographics6 .BaseWidget_ContentPane { margin: 0px !important; overflow: hidden !important; height: inherit !important; width: inherit !important; } #infographics7 .BaseWidget_ContentPane { margin: 0px !important; overflow: hidden !important; height: inherit !important; width: inherit !important; } #infographics8 .BaseWidget_ContentPane { margin: 0px !important; overflow: hidden !important; height: inherit !important; width: inherit !important; } /*div[id^=infographics] .WidgetBack {*/ #infographics1 .WidgetBack { font-family: 'Titillium Web', sans-serif !important; width: inherit !important; height: inherit !important; } #infographics2 .WidgetBack { font-family: 'Titillium Web', sans-serif !important; width: inherit !important; height: inherit !important; } #infographics3 .WidgetBack { font-family: 'Titillium Web', sans-serif !important; width: inherit !important; height: inherit !important; } #infographics4 .WidgetBack { font-family: 'Titillium Web', sans-serif !important; width: inherit !important; height: inherit !important; } #infographics5 .WidgetBack { font-family: 'Titillium Web', sans-serif !important; width: inherit !important; height: inherit !important; } #infographics6 .WidgetBack { font-family: 'Titillium Web', sans-serif !important; width: inherit !important; height: inherit !important; } #infographics7 .WidgetBack { font-family: 'Titillium Web', sans-serif !important; width: inherit !important; height: inherit !important; } #infographics8 .WidgetBack { font-family: 'Titillium Web', sans-serif !important; width: inherit !important; height: inherit !important; } /*div[id^=infographics] .WidgetBack .dijitContentPanel { */ #infographics1 .WidgetBack .dijitContentPanel { overflow: hidden !important; } #infographics2 .WidgetBack .dijitContentPanel { overflow: hidden !important; } #infographics3 .WidgetBack .dijitContentPanel { overflow: hidden !important; } #infographics4 .WidgetBack .dijitContentPanel { overflow: hidden !important; } #infographics5 .WidgetBack .dijitContentPanel { overflow: hidden !important; } #infographics6 .WidgetBack .dijitContentPanel { overflow: hidden !important; } #infographics7 .WidgetBack .dijitContentPanel { overflow: hidden !important; } #infographics8 .WidgetBack .dijitContentPanel { overflow: hidden !important; } /*div[id^=infographics] .WidgetBack .BaseSelectComparison_Select .dijitSelect { */ #infographics1 .WidgetBack .BaseSelectComparison_Select .dijitSelect { display: none !important; } #infographics2 .WidgetBack .BaseSelectComparison_Select .dijitSelect { display: none !important; } #infographics3 .WidgetBack .BaseSelectComparison_Select .dijitSelect { display: none !important; } #infographics4 .WidgetBack .BaseSelectComparison_Select .dijitSelect { display: none !important; } #infographics5 .WidgetBack .BaseSelectComparison_Select .dijitSelect { display: none !important; } #infographics6 .WidgetBack .BaseSelectComparison_Select .dijitSelect { display: none !important; } #infographics7 .WidgetBack .BaseSelectComparison_Select .dijitSelect { display: none !important; } #infographics8 .WidgetBack .BaseSelectComparison_Select .dijitSelect { display: none !important; } #infographics1 .BaseWidget_Title { font-size: 1.0em !important; /*margin-left: 10px !important; */ color: #000 !important; } #infographics2 .BaseWidget_Title { font-size: 1.0em !important; /*margin-left: 10px !important; */ color: #000 !important; } #infographics3 .BaseWidget_Title { font-size: 1.0em !important; /*margin-left: 10px !important; */ color: #000 !important; } #infographics4 .BaseWidget_Title { font-size: 1.0em !important; /*margin-left: 10px !important; */ color: #000 !important; } #infographics5 .BaseWidget_Title { font-size: 1.0em !important; /*margin-left: 10px !important; */ color: #000 !important; } #infographics6 .BaseWidget_Title { font-size: 1.0em !important; /*margin-left: 10px !important; */ color: #000 !important; } #infographics7 .BaseWidget_Title { font-size: 1.0em !important; /*margin-left: 10px !important; */ color: #000 !important; } #infographics8 .BaseWidget_Title { font-size: 1.0em !important; /*margin-left: 10px !important; */ color: #000 !important; } #infographics1 .BaseWidget_Subtitle { font-size: 1.0em !important; color: #000000 !important; } #infographics2 .BaseWidget_Subtitle { font-size: 1.0em !important; color: #000000 !important; } #infographics3 .BaseWidget_Subtitle { font-size: 1.0em !important; color: #000000 !important; } #infographics4 .BaseWidget_Subtitle { font-size: 1.0em !important; color: #000000 !important; } #infographics5 .BaseWidget_Subtitle { font-size: 1.0em !important; color: #000000 !important; } #infographics6 .BaseWidget_Subtitle { font-size: 1.0em !important; color: #000000 !important; } #infographics7 .BaseWidget_Subtitle { font-size: 1.0em !important; color: #000000 !important; } #infographics8 .BaseWidget_Subtitle { font-size: 1.0em !important; color: #000000 !important; } #infographics1 .AgePyramid_ContentPane { overflow: hidden; height: 340px !important; top: 15px !important; } #infographics1 .AgePyramid_MinMax { display: none !important; } #infographics1 .AgePyramid_Comparison { /*left: 0px !important; bottom: 0px !important; width: 75% !important; padding-left: 10px !important;*/ display: none !important; } #infographics1 .RelatedVariables_ComparisonDiv { display: none !important; } #infographics2 .RelatedVariables_ComparisonDiv { display: none !important; } #infographics4 .RelatedVariables_ComparisonDiv { display: none !important; } #infographics5 .RelatedVariables_ComparisonDiv { display: none !important; } #infographics6 .RelatedVariables_ComparisonDiv { display: none !important; } #infographics7 .RelatedVariables_ComparisonDiv { display: none !important; } #infographics8 .RelatedVariables_ComparisonDiv { display: none !important; } #infographics1 .AgePyramid_ComparisonLabel { display: none !important; } #infographics1 .RelatedVariables_Table { font-size: 1em !important; max-width: 380px !important; margin-left: 2px !important; } #infographics2 .RelatedVariables_Table { font-size: 1em !important; max-width: 380px !important; margin-left: 2px !important; } #infographics4 .RelatedVariables_Table { font-size: 1em !important; max-width: 380px !important; margin-left: 2px !important; } #infographics5 .RelatedVariables_Table { font-size: 1em !important; max-width: 380px !important; margin-left: 2px !important; } #infographics6 .RelatedVariables_Table { font-size: 1em !important; max-width: 380px !important; margin-left: 2px !important; } #infographics7 .RelatedVariables_Table { font-size: 1em !important; max-width: 380px !important; margin-left: 2px !important; } #infographics8 .RelatedVariables_Table { font-size: 1em !important; max-width: 380px !important; margin-left: 2px !important; } #infographics1 .RelatedVariables_ColumnHeader { font-size: 1em !important; max-width: 380px !important; /*margin-left: 10px !important;*/ } #infographics2 .RelatedVariables_ColumnHeader { font-size: 1em !important; max-width: 380px !important; /*margin-left: 10px !important;*/ } #infographics4 .RelatedVariables_ColumnHeader { font-size: 1em !important; max-width: 380px !important; /*margin-left: 10px !important;*/ } #infographics5 .RelatedVariables_ColumnHeader { font-size: 1em !important; max-width: 380px !important; /*margin-left: 10px !important;*/ } #infographics6 .RelatedVariables_ColumnHeader { font-size: 1em !important; max-width: 380px !important; /*margin-left: 10px !important;*/ } #infographics7 .RelatedVariables_ColumnHeader { font-size: 1em !important; max-width: 380px !important; /*margin-left: 10px !important;*/ } #infographics8 .RelatedVariables_ColumnHeader { font-size: 1em !important; max-width: 380px !important; /*margin-left: 10px !important;*/ } #infographics1 .RelatedVariables_DifferenceColumn { display:none !important; } #infographics1 .RelatedVariables_ChartNegative { display:none !important; } #infographics1 .RelatedVariables_ChartPositive { display:none !important; } #infographics1 .RelatedVariables_Labels { display:none !important; } #infographics1 .RelatedVariables_ComparisonLabel { display: none !important; } #infographics2 .RelatedVariables_DifferenceColumn { display:none !important; } #infographics2 .RelatedVariables_ChartNegative { display:none !important; } #infographics2 .RelatedVariables_ChartPositive { display:none !important; } #infographics2 .RelatedVariables_Labels { display:none !important; } #infographics2 .RelatedVariables_ComparisonLabel { display: none !important; } #infographics4 .RelatedVariables_DifferenceColumn { display:none !important; } #infographics4 .RelatedVariables_ChartNegative { display:none !important; } #infographics4 .RelatedVariables_ChartPositive { display:none !important; } #infographics4 .RelatedVariables_Labels { display:none !important; } #infographics4 .RelatedVariables_ComparisonLabel { display: none !important; } #infographics5 .RelatedVariables_DifferenceColumn { display:none !important; } #infographics5 .RelatedVariables_ChartNegative { display:none !important; } #infographics5 .RelatedVariables_ChartPositive { display:none !important; } #infographics5 .RelatedVariables_Labels { display:none !important; } #infographics5 .RelatedVariables_ComparisonLabel { display: none !important; } #infographics6 .RelatedVariables_DifferenceColumn { display:none !important; } #infographics6 .RelatedVariables_ChartNegative { display:none !important; } #infographics6 .RelatedVariables_ChartPositive { display:none !important; } #infographics6 .RelatedVariables_Labels { display:none !important; } #infographics6 .RelatedVariables_ComparisonLabel { display: none !important; } #infographics7 .RelatedVariables_DifferenceColumn { display:none !important; } #infographics7 .RelatedVariables_ChartNegative { display:none !important; } #infographics7 .RelatedVariables_ChartPositive { display:none !important; } #infographics7 .RelatedVariables_Labels { display:none !important; } #infographics7 .RelatedVariables_ComparisonLabel { display: none !important; } #infographics8 .RelatedVariables_DifferenceColumn { display:none !important; } #infographics8 .RelatedVariables_ChartNegative { display:none !important; } #infographics8 .RelatedVariables_ChartPositive { display:none !important; } #infographics8 .RelatedVariables_Labels { display:none !important; } #infographics8 .RelatedVariables_ComparisonLabel { display: none !important; } #infographics1 .RelatedVariables_TextColumn { width: 84% !important; height: 18px !important; font-size: 0.9em !important; margin-left: 2px !important; } #infographics2 .RelatedVariables_TextColumn { width: 84% !important; height: 18px !important; font-size: 0.9em !important; margin-left: 2px !important; } #infographics4 .RelatedVariables_TextColumn { width: 84% !important; height: 18px !important; font-size: 0.9em !important; margin-left: 2px !important; } #infographics5 .RelatedVariables_TextColumn { width: 84% !important; height: 18px !important; font-size: 0.9em !important; } #infographics6 .RelatedVariables_TextColumn { width: 84% !important; height: 18px !important; font-size: 0.9em !important; } #infographics7 .RelatedVariables_TextColumn { width: 84% !important; height: 18px !important; font-size: 0.9em !important; } #infographics8 .RelatedVariables_TextColumn { width: 84% !important; height: 18px !important; font-size: 0.9em !important; } #infographics1 .RelatedVariables_ValueColumn { width: 21% !important; height: 18px !important; font-size: 0.9em !important; } #infographics2 .RelatedVariables_ValueColumn { width: 21% !important; height: 18px !important; font-size: 0.9em !important; } #infographics4 .RelatedVariables_ValueColumn { width: 21% !important; height: 18px !important; font-size: 0.9em !important; } #infographics5 .RelatedVariables_ValueColumn { width: 21% !important; height: 18px !important; font-size: 0.9em !important; } #infographics6 .RelatedVariables_ValueColumn { width: 21% !important; height: 18px !important; font-size: 0.9em !important; } #infographics7 .RelatedVariables_ValueColumn { width: 21% !important; height: 18px !important; font-size: 0.9em !important; } #infographics8 .RelatedVariables_ValueColumn { width: 19% !important; height: 18px !important; font-size: 0.9em !important; } #infographics1 .AlternatingRow { background-color: #FFFFFF !important; color: #000000 !important; } #infographics2 .AlternatingRow { background-color: #FFFFFF !important; color: #000000 !important; } #infographics3 .AlternatingRow { background-color: #FFFFFF !important; color: #000000 !important; } #infographics4 .AlternatingRow { background-color: #FFFFFF !important; color: #000000 !important; } #infographics5 .AlternatingRow { background-color: #FFFFFF !important; color: #000000 !important; } #infographics6 .AlternatingRow { background-color: #FFFFFF !important; color: #000000 !important; } #infographics7 .AlternatingRow { background-color: #FFFFFF !important; color: #000000 !important; } #infographics8 .AlternatingRow { background-color: #FFFFFF !important; color: #000000 !important; } #infographics3 .OneVarMultiComparison_Row { background-color: #FFFFFF !important; color: #000000 !important; } #infographics3 .OneVarMultiComparison_Value { display: none !important; } #infographics3 .OneVarMultiComparison_ChartColumn { display: none !important; } #infographics3 .OneVarMultiComparison_TextColumn { width: 79% !important; height: 18px !important; font-size: 0.9em !important; } #infographics3 .OneVarMultiComparison_ValueColumn { width: 21% !important; height: 18px !important; font-size: 0.9em !important; } #infographics3 .OneVarMultiComparison_ValueColumnHeader { color: #000000 !important; display: none !important; } #infographics3 .OneVarMultiComparison_CurrentRow { color: #000000 !important; font-size: 0.9em !important; } #infographics3 .OneVarMultiComparison_TextColumnHeader { color: #000000; font-size: 1em !important; display: none !important; } #infographics3 .OneVarMultiComparison_ChartColumnHeader_Lower { display: none !important; } #infographics3 .OneVarMultiComparison_ChartColumnHeader_Upper { display: none !important; } #infographics3 .OneVarMultiComparison_Table { font-size: 1em !important; max-width: 360px !important; } #infographics1 .SortLink { display: none !important; } #infographics2 .SortLink { display: none !important; } #infographics3 .SortLink { display: none !important; } #infographics4 .SortLink { display: none !important; } #infographics5 .SortLink { display: none !important; } #infographics6 .SortLink { display: none !important; } #infographics7 .SortLink { display: none !important; } #infographics8 .SortLink { display: none !important; } #infographics1 path { stroke: #000000 !important; } #infographics1 polyline { stroke: #000000 !important; } /* svg { max-height: 340px !important; } */ /*#myModal .WidgetBack #myModal .dijitContentPane { padding: 0 !important; height: 250px !important; width: 193px !important; top: 0px !important; }*/ /*#myModal .BaseWidget_HeaderPane { margin: 0 !important; width: 193px !important; }*/ /*#myModal .AgePyramid_Chart { top: 10 !important; width: 90% !important; right: 0 !important; }*/ /*svg { height: 220 !important; width: 183 !important; } g { height: 190 !important; }*/ </style> <link rel="stylesheet" type="text/css" href="configs/loading/loading.css" /> <script> /******************************* * This is the function you can modify to customize the loading page * This function will be invoked when one resource is loaded. ********************************/ // var progress; // function loadingCallback(url, i, count) { // var loading = document.getElementById('main-loading-bar'); // loading.setAttribute('title', url); // if(!progress){ // progress = document.createElement('div'); // progress.setAttribute('class', 'loading-progress'); // loading.appendChild(progress); // } // progress.style.width = (((i - 1)/count) * 100) + '%'; // } </script> </head> <body class="claro jimu-main-font"> <div id="main-loading"> <!-- This is section you can modify to customize the loading page --> <div id="app-loading"></div> <div id="loading-gif"></div> <!-- ////////////////// END ////////////////////////////// --> <div id="ie-note" style="display:none;"> <div class="hint-title">Error</div> <div class="hint-img">Your browser is currently not supported.</div> <p class="hint-text"> <span> Please note that creating presentations is not supported in Internet Explorer versions 6, 7. </span> <br> <span> We recommend upgrading to the latest Internet Explorer, Google Chrome, or Firefox. </span> <br> <span> If you are using IE 8 or later, make sure you turn off "Compatibility View". </span> </p> </div> </div> <div id="main-page"> <div id="jimu-layout-manager"></div> </div> <!--C1B. jsPDF library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script> <!-- <script src="https://cosmos.surrey.ca/external/tools/SiteSelector/report/jspdf.min.js"></script> --> <script src="https://cosmos.surrey.ca/external/tools/SiteSelector/report/html2canvas.min.js"></script> <script src="https://cosmos.surrey.ca/external/tools/SiteSelector/report/html2pdf.js"></script> <script src="env.js"></script> <script type="text/javascript" src="simpleLoader.js"></script> <script type="text/javascript" src="init.js"></script> <!--C1B. utilities --> <!--<script type="text/javascript" src="https://cosmos.surrey.ca/external/tools/SiteSelector/report/utilities.js"></script>--> <!--C1B. custom css --> <!--<link href="https://cosmos.surrey.ca/external/tools/SiteSelector/report/css/style.css" rel="stylesheet">--> </body> </html>

[eKoopmans]

@CameronBlandy, I'm really sorry I didn't get to your question earlier - I've been swamped. Did you manage to solve your issue? I'll be happy to help if it's still a problem.

My very first suggestion would be to try grabbing the new v0.8.0 build. That link is for the 'bundled' build, which has all the dependencies built in, and should make using it much easier. Let me know if that helps!

[CameronBlandy]

Hi Erik, Understand that you are busy, no problem. Tried the bundled build that you suggested and that does seem to wort much better. Only question I have is, does that include the callback branch that you created. I use that feature in my export. Thanks again for a wonderful product. Cameron CAMERON BLANDY | GIS ANALYST [COS LOGO_ email sig final] GIS Section 13450 104 Ave, Surrey, BC, V3T 1V8 T 604.591.4699 | F 604.598.5781 |www.surrey.ca [Social Media Icons_email_GREEN]<http://www.surrey.ca/12392.aspx>[Social Media Icons_City Speaks_GREEN]<https://www.cityspeaks.ca/Portal/default.aspx> [Social Media Icons_Twitter_GREEN] <https://twitter.com/cityofsurrey> [Social Media Icons_FB_GREEN] <https://www.facebook.com/TheCityofSurrey> [Social Media Icons_YT_GREEN] <http://www.youtube.com/TheCityofSurrey> [Social Media Icons_linkedin_GREEN] <http://www.linkedin.com/company/city-of-surrey> Connect, Share and Engage with your City From: Erik Koopmans [mailto:notifications@github.com] Sent: November-27-17 2:44 AM To: eKoopmans/html2pdf Cc: Blandy, Cameron; Mention Subject: Re: [eKoopmans/html2pdf] Multiple Browser Issues with html2pdf (#45) @CameronBlandy<https://github.com/cameronblandy>, I'm really sorry I didn't get to your question earlier - I've been swamped. Did you manage to solve your issue? I'll be happy to help if it's still a problem. My very first suggestion would be to try grabbing the new v0.8.0 build<https://github.com/eKoopmans/html2pdf/blob/master/dist/html2pdf.bundle.min.js>. That link is for the 'bundled' build, which has all the dependencies built in, and should make using it much easier. Let me know if that helps! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#45 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AfsRxx240XkDhqP1RMozscpY-hnEFUrcks5s6pJ_gaJpZM4QLlKV>.

[eKoopmans]

Good question! I've just updated the pdf-callback branch to be in line with v0.8.0, so it should be good to go.

I'm still keeping that feature out of the main build, because I still see it as a temporary fix that I'll solve differently with the "new API". That's my next goal, now that the build process/NPM support is sorted.

[itskashi]

@eKoopmans I was wondering if you have any further update on the PDF Output feature,
Shall I use pdf-callback branch or is there anything coming out soon.
I need to email the generated pdf as an email attachment. Can you please advise?
_
Thanks

[eKoopmans]

Hey @itskashi, sorry to keep you hanging. Yes I'm actively working on the new API, and it's getting close to ready for testing, but if you need something that will work right now it's probably best to go with the pdf-callback branch. I'll post here when the new API is ready for testing.

[itskashi]

@eKoopmans that shall be great. As of now, I am able to resolve the problem. I had to merge the Callback branch with the latest version. The callback branch apparently has some page-break issue.

[eKoopmans]

Hi, I have just pushed a new branch, new-api, which is ready for testing! The readme has all the information on the new API. Please let me know if there are any problems with it - I want to make sure it's stable before merging into master!

[eKoopmans]

Hi, closing as resolved by the v0.9.0 new API.