The title is a bit messy, so I describe the problem here:
Situation: I am trying to convert HTML files to PDF using JsPDF library through react with Bootstrap 5 CSS support,
Sample input:
The way: I am using the code written down here:
let newDom = document.body.querySelector("#print-target2") as HTMLElement;
pdf.html(newDom, {
autoPaging: true,
callback: (htmlPDF) => {
//Download to user PC
htmlPDF.save("new.pdf");
},
});
The Symptom: Sometimes when the lines are inside a td and have special characters like Á or " in them, the spaces in those lines disappear and become negative space resulting in the two words getting inside each other.
You guys have any idea?
Related
I have read several posts on this subject but didn't want to piggy-back on any of them with additional questions.
Specifically this post: TCPDF and insert an image base64 encoded
I am generating a PDF from within a custom theme in Wordpress. I'm using TCPDF 6.2.3 (latest stable release, I believe).
I am building this PDF from the same HTML I am using to display on the page. If I embed the full base64 encoded string, it works correctly in the browser, but the image is missing from the PDF.
If I use the "#" method described in the linked post, I get a broken image in the browser (expectedly) but still nothing in the PDF.
All the rest of my HTML markup is rendering in the PDF, images are just not showing.
Is there some other setting or option I need to set in order to get the images to appear in the PDF, and/or can you spot anything I'm doing wrong here? No errors, the images are just not visible in the PDF.
This is how I set the image up:
$imageLocation = $img_root.$imgsrc;
$ext = end(explode(".", $imageLocation));
$image = base64_encode(file_get_contents($imageLocation));
//$response .= "<img src='data:image/$ext;base64,$image'>"; //works in browser but not in PDF
$response .= "<img src='#$image' class='socf_image'>"; //does not work in browser or PDF
And here is the method to create the PDF:
function createPDF($response)
{
// Include the main TCPDF library (search for installation path).
require_once('tcpdf_6_3_2/tcpdf/tcpdf.php');
// create new PDF document
$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);
// set document information
$pdf->SetCreator(PDF_CREATOR);
$pdf->SetAuthor('test');
$pdf->SetTitle('test');
$pdf->SetSubject('test');
$pdf->SetKeywords('test');
// set default header data
$pdf->SetHeaderData(PDF_HEADER_LOGO, PDF_HEADER_LOGO_WIDTH, PDF_HEADER_TITLE.' 001', PDF_HEADER_STRING, array(0,64,255), array(0,64,128));
$pdf->setFooterData(array(0,64,0), array(0,64,128));
// 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, PDF_MARGIN_TOP, PDF_MARGIN_RIGHT);
$pdf->SetHeaderMargin(PDF_MARGIN_HEADER);
$pdf->SetFooterMargin(PDF_MARGIN_FOOTER);
// set auto page breaks
$pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);
// set image scale factor
$pdf->setImageScale(PDF_IMAGE_SCALE_RATIO);
// set default font subsetting mode
$pdf->setFontSubsetting(true);
// Set font
$pdf->SetFont('helvetica', '', 14, '', true);
// Add a page
$pdf->AddPage();
$html = $response;
$pdf->writeHTML($response, true, false, true, false, '');
return $pdf;
}
Well, fortunately, I was able to figure it out on my own. Perhaps this isn't the best forum for seeking help with this library? If anyone can suggest a better place to get help, I'd appreciate the direction.
Ultimately, the issue was two-fold:
The "#" notation is required for the PDf while the approach is what works for displaying the HTML in browser. So a string replace before creating the PDF solves that.
This is the tricky part. The HTML needs to use double-quotes around the properties, not single quotes. My code was using double quotes for the PHP strings, so the HTML properties were surrounded with single quotes and that was the issue. Swapping the two quote types was the last piece of the puzzle to get the images to appear in the PDF.
Hopefully this will help someone else who is pulling their hair out trying to blindly find their way through this library like me.
I am using Highcharts to render plots within ShinyServer. Everything works well on Firefox but in Chrome the export chocks on duplicate headers; this is because the filename contains commas.
Is there a way to properly escape the filename within highcharts or Shiny? The recommendation is to double quote the filename but I only pass the first part of the name to highcharts and not the extension so I cannot double quote the whole string in Shiny. I have access to the highcharts server so I could modify that if I knew where to look.
I realise the simple solutions are
Not to put commas in the filename or
Not to use chrome,
but
Sooner or later I will have to use a special character of some sort and
Chrome is just adhering more strictly to safe practices and other browsers will follow suite one day.
You can wrap exporting function by API and then in this part, escape / modify name.
Highcharts.post(options.url, {
filename: options.filename || 'chart',
type: options.type,
width: options.width || 0, // IE8 fails to post undefined correctly, so use 0
scale: options.scale || 2,
svg: svg
}, options.formAttributes);
I'm using Prawn gem in my Rails app to generate PDF reports.
I read the documentation for putting the text in Arabic with text_direction RTL in arabic.
But, issue is that numbers are getting reversed here.
I wanted semester 1234 as الفصل الدراسي 1234,
but in my app the output is الفصل الدراسي 4321.
My two lines of code is here:
pdftable = Prawn::Document.new
pdftable.text(t('org.semester') + " " + #semester)
#semester = '1234' (The reason would be that it is being treated as a text/string, thus changes to RTL (reversed))
Anyway, Please help me to retain numbers in proper order without changing the RTL format.
Without hacking too much you could use
#semester.to_s.reverse
So you reverse the string twice
I have been searching for an answer all around the web, but couldn't find anything.
I am developing Blackberry Webworks application and the problem is with dialog and unicode. For example:
when I use simple javascript alert(unicodeMsg); unicode works fine, I can use any character including Russian or Lithuanian. The problem is that the alert box has title "JavaScript Alert" and it annoys a bit.
when I use native alert either phonegap or webworks like:
blackberry.ui.dialog.standardAskAsync(unicodeMsg,
blackberry.ui.dialog.D_OK, {
title : unicodeTitle,
size: blackberry.ui.dialog.SIZE_MEDIUM,
position : blackberry.ui.dialog.CENTER
});
it doesn't show any unicode characters. I tried pretty much everything (setting my document in utf-8, using \uxxxx characters, changing meta tags from utf-8 to windows-1257 but nothing works)
I suppose the problem is not with html or js documents neither with the script. Can someone help me?
You need to encode the unicode characters like so text: unescape(encodeURIComponent(unicodeStr)) .
There is an example here - http://blackberry-webworks.github.com/WebWorks-API-Docs/WebWorks-API-Docs-next-BB10/view/blackberry.invoke.html
I am using the OBJLoader to load a large 3D model (described in a .obj file) and I want to display the models name on its surfaces. Though it seems that Three.js can only display English characters. My question is how can I display Chinese characters in Three.js?
there are a couple of ways to display text (https://github.com/mrdoob/three.js/wiki/Text-in-Three.js), but since exporting a chinese font might be more difficult, it might be easier to draw the chinese characters to a canvas texture and use the texture as a material in the scene.
It seem that you can use Facetype.js to get a Chinese font library, for example"YaHei_Regular.typeface.json" , then you can show Chinese characters.
var fontLoader = new THREE.FontLoader();
fontLoader.load("YaHei_Regular.typeface.json", (font)=> {
this.font = font;
});
Another option is using msdf-bmfont-xml. This example uses Microsoft YaHei.
charset.txt —
你好，世界
You may need to install dependencies first. Then:
npm install msdf-bmfont-xml -g
msdf-bmfont -f json yahei.ttf -i charset.txt --pot --square
and finally, use three-bmfont-text to render the text.
Three.js doesn't display Chinese regularly because it doesn't support the charset. You have to load it dynamically.
It seems there're two methods to load: 1, new THREE.TTFLoader().load('*.ttf') , it loads a ttf file that support Chinese charset. But I failed.
2, new THREE.FontLoader().load('*.json') it loads a json file transformed by
the ttf on http://gero3.github.io/facetype.js/ website.
But firstly you have to find a complete ttf file. I tried 方正兰亭超细黑简体 and 方正赵佶瘦金书 which both work, you can google and download ttf file. I found some ttf can't be identified by three.js completely. You perhaps see some Chinese char display normally but others still display '?'.
The final code snippets as following:
const three_font = new THREE.FontLoader();
three_font.load('*.json', function (font_font) {
font=font_font
})
// finally add text with font
const geometry = new THREE.TextGeometry(
{
font: font,
size, height: h, curveSegments: 4, bevelThickness: 2, bevelSize: 2, bevelEnabled: true
});
geometry.computeBoundingSphere();
geometry.computeVertexNormals();
const mesh = new THREE.Mesh(geometry, pool.textMaterial);
mesh.position.set(x * deviation, y, z * deviation);
mesh.rotation.set(rx, ry, rz);
scene.add(mesh);