pdf-generator icon indicating copy to clipboard operation
pdf-generator copied to clipboard

Published 20 hours ago • verified publisher icon cesarvr

iOS text overlap on the pdf generated

Open gvsrinivas9 opened this issue 5 years ago • 0 comments

Hi, We are using the plugin and we have two issues:

Issue 1: On iOS, when we apply the font-weight:bold in css; the PDF is generated and the text is overlapped(zoom the pdf to see). With the same code on Android it works fine.

Please find the attached snippet.js, test.css, test.pdf for issue1. Font family: Lato-Regular.ttf Platform: iOS 12.4 Device: iPhone 6s, 6s plus Version: 2.0.8

Issue 2: In both Android and iOS, the Font family is not being applied when we directly load the fonts and use in the css file after the creation of a PDF. Are there any font restrictions on the plugin?

Could you check the the issues and provide solution?

Please find the pdf for issue 1: https://filebin.net/q1cg3wqof27m9mjn/test.pdf?t=sktnrlv9

var windowWidth = window.screen.availWidth;
           var blockWidthPer = 115; // 80% container width
           var blockWidth = (windowWidth / 100) * blockWidthPer;
           var windowHeight = window.screen.availHeight;
           var blockHeightPer = 100; // 70% container height
           var blockHeight = (windowHeight / 100) * blockHeightPer;
           var options = {
               documentSize: 'A4',
               type: 'base64'
           };

           var data = '<div class="test-normal-cls-pdf">' +
               'Test Normal font' +
               '<div class="test-bold-cls-pdf">' + 'Test Bold font 123456789' + '</div>' +
               '</div>',
               htmlHeader = '<head><base href="www/">',
               loadFontHtml = '<style type="text/css">@font-face {font-family: Lato-Regular; src: url("resources/fonts/Lato-Regular.ttf")} body{font-family:Lato-Regular;}</style>';
           
           var htmlData = htmlHeader + loadFontHtml +
               '<link rel="stylesheet" href="resources/css/pdfstyles.css">' +
               '</head><body><div style="width: ' + blockWidth + 'px !important;height:' + blockHeight + 'px !important;margin-left: 20% !important;>' + data + '</div></body>';


               pdf.fromData(htmlData, options)
               .then(function (base64) {
                   //code
               });

.test-normal-cls-pdf {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #d7d7d7;
  background: #FFFFFF;
  min-height: 50px;
  font-family: Lato-Regular;
  font-size: 16px;
  color: #7d7d7d;
  padding: 15px 20px;
}

.test-bold-cls-pdf {
  font-family: Lato-Regular;
  font-size: 15px;
  margin: 5px 0px;
  font-weight: bold;
  color: black !important;
  font-weight: bold;
}

Thanks, 
Srinivas

gvsrinivas9 avatar Oct 07 '19 12:10 gvsrinivas9