TCPDF Qr code resize on small size page - tcpdf

I use this code for create a 80x30 mm pdf file with a 25x25 mm qrcode: I change the qrcode width and height but it doesn't resize and I always see a little qrcode into the page.
Where is the error?? Please help me... I can't undertand the problem! :)
<?php
require_once('../config/lang/eng.php');
require_once('../tcpdf.php');
// create new PDF document
$pdf = new TCPDF("L", "mm", array(80,30) , true, 'UTF-8', false);
//set margins
$pdf->SetMargins(0, PDF_MARGIN_TOP, 0);
$pdf->SetHeaderMargin(0);
$pdf->SetFooterMargin(0);
$pdf->setPrintHeader(false);
$pdf->setPrintFooter(false);
//set auto page breaks
$pdf->SetAutoPageBreak(false, 0);
//set image scale factor
$pdf->setImageScale(1);
//set some language-dependent strings
$pdf->setLanguageArray($l);
// add a page
$pdf->AddPage();
$pdf->SetAutoPageBreak(false, 0);
// new style
$style = array(
'border' => false,
'padding' => 'auto',
'fgcolor' => array(0,0,0),
'bgcolor' => false
);
$pdf->write2DBarcode('http://www.google.it/', 'QRCODE,H', 50, 1, 300, 300, $style, 'N');
// ---------------------------------------------------------
//Close and output PDF document
$pdf->Output('test.pdf', 'I');
//============================================================+
// END OF FILE
//============================================================+
?>
Thank you!!!

Problem solved:
Before:
[...]
$pdf = new TCPDF("L", "mm", array(80,30) , true, 'UTF-8', false);
[...]
$pdf->AddPage();
[/code]
After:
[code]
[...]
$pdf = new TCPDF("P", "mm", array(80,30) , true, 'UTF-8', false);
[...]
$pdf->AddPage('L', '', false, false);
[/code]
The problem is the constructor page orientation that create confusion to the system: default portrait is ok, I have only to change the Add page orientation to Landscape and the problem is solved.
Thank you again for the attention.
:)

Related

Multiple html2canvas div content in single .pdf file

I'm using attached script to allocate content of div into .pdf file with jsPDF and html2canvas.
All works nicely with content of one single div (inputdiv).
However, I would like to add conent from few more additional div's into same .pdf file.
Question is how to do that?
With approach from below, only content of single div can be mapped through relevant canvas function. I tried to find some extra details in documentation and also here but unfortunately without success.
Any reference would be highly appreciated!
function generatePDF() {
var doc = new jsPDF ("l", "mm", "a4", "true");
html2canvas(inputdiv, {
width: 2000,
height: 1450,
scale: 2,
onclone: function (clonedDoc) {
clonedDoc.getElementById('inputdiv').style.display = 'block';
}
})
.then(function(canvas) {
var imgData = canvas.toDataURL('image/jpeg',1.0);
const imgProps= doc.getImageProperties(imgData);
const pdfWidth = doc.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
doc.addImage(imgData, 'jpeg', 14, 19, pdfWidth, pdfHeight, undefined, 'FAST');
doc.save('File.pdf');
});
}
This is an example of how you can solve this, for 2 divs that will print on 2 pages.
Of course if you have many divs, it would need to be refactored to avoid code repetition; but this one worked for me to include 2 different divs.
html2canvas(div1)
.then((canvasDiv1) =>{
//...
pdf.addImage(/* ... */);
})
.then(() => {
pdf.addPage();
html2canvas(div2)
.then((canvasDiv2) => {
//...
pdf.addImage(/* ... */);
// save on the last element
pdf.save(/* ... */);
})
})
If you need both divs to be on the same page, then just remove the pdf.addPage() and adjust the coordinates to place the second div where you need.

When adding custom fonts to jsPDF, some do not appear to work if the compression option is set to true

I recently discovered jsPDF new compression option. I've also been playing around with adding custom fonts that support foreign characters besides English when generating a PDF. Whenever I use the compression option and set it to true, some of the custom fonts do not appear to work within the PDF. Specifically Simplified Chinese, Korean and Japanese. Of course, I could just not use the compression option, but it's nice to have a compressed PDF.
view code: here
import React from 'react';
import './App.css';
import jsPDF from 'jspdf';
// arial-unicode-ms.ttf font converted to base64
import { base64Str } from './base64';
function App() {
const genPDF = () => {
const doc = new jsPDF({
compress: true,
orientation: 'p',
unit: 'px',
format: 'a4'
});
// ADDING FONT FILE
doc.addFileToVFS('unicodeMS.ttf', base64Str);
doc.addFont('unicodeMS.ttf', 'unicodeMS', 'normal');
doc.setTextColor(255, 0, 0);
doc.setFillColor(135, 124,45,0);
console.log(doc.getFontList());
console.log(base64Str);
doc.setFont('unicodeMS');
const x = 30,
y = 30;
doc.text('Vietnamese: Chào thế giới', x, y);
doc.text('Chinese: 你好,世界', x, y+15);
doc.text('Arabic: مرحبا بالعالم', x, y+30);
doc.text('Hebrew: שלום עולם', x, y+45);
doc.text('Japanese: こんにちは世界', x, y+60);
doc.text('English: Hello world', x, y+75);
doc.text('Korean: 안녕하세요 세계', x, y+90);
window.open(doc.output('bloburl'));
};
return (
<div className="App">
<button onClick={genPDF}>test pdf gen</button>
</div>
);
}
export default App;

TCPDF Header and Top Margin on fist page only then no header and different top margin on remaining pages

I am using tcpdf to generate a pdf. I only want the header to appear on the first page and have it so that it does not appear on the remaining pages. However, I would like the top margin of the remaining pages shifted up since there is no header on those pages.
I'm using MYPDF to extend TCPDF to customize the header to only show on the first page.
// Extend the TCPDF class to create custom Header and Footer
class MYPDF extends TCPDF {
//Page header
public function Header() {
if (count($this->pages) === 1) { // Do this only on the first page
$html .= 'header text';
}
$this->writeHTML($html, true, false, false, false, '');
}
}
// create new PDF document
$pdf = new MYPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, 'LETTER', true, 'UTF-8', false);
// set document information
$pdf->SetCreator(PDF_CREATOR);
// set default header data
$pdf->SetHeaderData(PDF_HEADER_LOGO, PDF_HEADER_LOGO_WIDTH, PDF_HEADER_TITLE, PDF_HEADER_STRING);
// set header and footer fonts
$pdf->setHeaderFont(Array(PDF_FONT_NAME_MAIN, '', PDF_FONT_SIZE_MAIN));
$pdf->setFooterFont(Array(PDF_FONT_NAME_DATA, '', PDF_FONT_SIZE_DATA));
// set default monospaced font
$pdf->SetDefaultMonospacedFont(PDF_FONT_MONOSPACED);
// set margins
$pdf->SetMargins(PDF_MARGIN_LEFT, 25, PDF_MARGIN_RIGHT);
$pdf->SetHeaderMargin(10);
$pdf->SetFooterMargin(PDF_MARGIN_FOOTER);
// set auto page breaks
$pdf->SetAutoPageBreak(TRUE, 20);
// set image scale factor
$pdf->setImageScale(PDF_IMAGE_SCALE_RATIO);
// set some language-dependent strings (optional)
if (#file_exists(dirname(__FILE__).'/lang/eng.php')) {
require_once(dirname(__FILE__).'/lang/eng.php');
$pdf->setLanguageArray($l);
}
// ---------------------------------------------------------
// set font
$pdf->SetFont('droidsansfallback', '', 10);
// add a page
$pdf->AddPage();
$pdf->resetColumns();
$pdf->setEqualColumns(3, 57); // KEY PART - number of cols and width
$pdf->selectColumn();
$content = '';
$content .= '
<table cellspacing="0" cellpadding="3">
';
$content .= fetch_data();
$content .= '</table>';
$pdf->writeHTML($content);
$pdf->Output('file.pdf', 'I');
Something like this worked for me:
public function Header() {
if ($this->page == 1) {
$html .= 'header text';
$this->writeHTML($html, true, false, false, false, '');
} else {
$this->SetMargins(PDF_MARGIN_LEFT, 10, PDF_MARGIN_RIGHT);
}
}
Only write the header HTML on the first page, then change the margins for the other pages.

TCPDF footer image overlapping on main content

I am using tc pdf library to generate pdf.
I have set custom hedar and footer like below
class CustomTcpdf extends \TCPDF {
public function Header() {
$headerData = $this->getHeaderData();
$this->writeHTML($headerData['string'], true, false, true, false, '');
}
public function Footer() {
// Position at 15 mm from bottom
$this->SetY(-50);
$image_file = 'footer.png';
$this->Image($image_file, 15, 250, 183);
}
}
Following is the code for creation
$tcpdf = new CustomTcpdf();
$tcpdf->setHeaderData($ln = '', $lw = 0, $ht = '', $pdf_header_data, $tc = array(0, 0, 0), $lc = array(0, 0, 0));
$tcpdf->AddPage('A4', 'Portrait');
$tcpdf->SetFooterMargin(60);
//$tcpdf->setHeaderMargin(40);
$tcpdf->SetAutoPageBreak(TRUE, 0);
$tcpdf->SetY(70);
$tcpdf->writeHTML($content, true, false, true, TRUE, '');
$tcpdf->Output('HAKO.pdf', 'I');
output for footer is as below
Expected output is,
Instant of overlapping the content should come on next page.
I use the following code in header function like below
class CustomTcpdf extends \TCPDF {
public function Header() {
$headerData = $this->getHeaderData();
$this->writeHTML($headerData['string'], true, false, true, false, '');
$this->SetTopMargin(70);
}
}
With the help of this->SetTopMargin(70) solve the header problem
and for footer $tcpdf->SetAutoPageBreak(TRUE, 65); 65 is margin from bottom with this 2 mothod overlapping issue will be solve.

How to print directly from iPad without any popup options in cordova print plugin?

Im using this cordova plugin:
https://github.com/katzer/cordova-plugin-printer
$ionicPlatform.ready().then(function () {
var printerId = $scope.printData.printerUrl;
alert('print to: ' + printerId);
cordova.plugins.printer.pick(function(printerId) {
cordova.plugins.printer.print("<p>TEST PRINT</p>", { printerId: printerId, bounds:[20, 20, 0, 0] });
});
});
I want to know how to print directly to printer without any popup.
Using ng-cordova printer, this code prints directly to printer.
Make sure you have correct printer url. something like "ipp://192.168.../ipp"
var htmlContent = "<!DOCTYPE html><html><head><meta charset='UTF-8'><title>Title</title> <link href='css/print.css' rel='stylesheet' /></head><body><div>test print</div></body></html>"
var options = {
name: 'print-job', // printjob name
printerId: $scope.PrinterUrl, // network url of the printer to use (iOS only)
//duplex: false, // default true (double sided) (iOS only)
landscape: false, // default false (portrait)
graystyle: true, // prints black and white (default), but true has better performance
bounds: {left:0, top:0, width:0, height:0}, // size and position of the print view (iPad only)
hidePaperFormat: true,
border: false,
hidePageRange: true
};
$cordovaPrinter.print(htmlContent, options).then(function(msg){
console.log('Print Ok: ' + msg);
});

Resources