UTF – 8 character support ( Chinese character support ) #671

sumeetpri · 2016-01-15T08:15:14Z

Hi ,
I have requirement to support utf-8 character. I have tried to with Chinese but it did not work . Below is my code , suggest how to support .

index.html

<!DOCTYPE html>
<html>    
    <head>
        <meta charset="UTF-8">
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>        
        <script  src="pdf-lib/dist/jspdf.debug.js"></script>
    </head>    
    <body>
        <div id="content"> 
            <h1>The title goes here 正體字/繁體字</h1> 
            <p>The pararaph goes here</p> 
            </div><div id="page">            
            </div> 
            <button id="submit">Export to  PDF</button>
            <script src="script2.js"></script>
    </body>
</html>

script2.js

var doc = new jsPDF(); 
var specialElementHandlers = { 
    '#editor': function (element, renderer) { 
        return true; 
    } 
};
$('#submit').click(function () { 
    doc.fromHTML($('#content').html(), 15, 15, { 
        'width': 190, 
            'elementHandlers': specialElementHandlers 
    }); 
    doc.save('sample-page.pdf'); 
});

wancheng · 2016-01-15T11:15:20Z

I also met this problem, finally I use html2canvas convert html to canvas ,then convert to image with canvas.toDataUrl .

sumeetpri · 2016-01-15T16:05:25Z

Can you give some example how you have used.
On Jan 15, 2016 4:46 PM, "张万程" notifications@github.com wrote:

I also met this problem, finally I use htmltocanvas convert html to canvas
,then convert to image with canvas.toDataUrl .

—
Reply to this email directly or view it on GitHub
#671 (comment).

wancheng · 2016-01-19T06:03:39Z

html2canvas(document.getElementById("print"),{
    onrendered:function(canvas){
        var imgData = canvas.toDataURL('image'/png');
        var doc = jsPDF('p','mm');
        doc.addImage(imgData,'PNG',0,0,canvas.width,canvas.height);

        doc.save('test.pdf');
    }
});

ryanlin1986 · 2016-01-19T12:08:16Z

I think it may be not a jsPDF issue, the font needs to be embedded.

priyaD15 · 2016-01-22T10:56:01Z

hi,
can you help in my issue?
the jsPdf is working fine with chrome, but in firefox its just showing black box in place of images.

sumeetpri · 2016-02-03T15:31:33Z

If you can post some relevant code then we might can help.
On Jan 22, 2016 4:26 PM, "priyaD15" notifications@github.com wrote:

hi,
can you help in my issue?
the jsPdf is working fine with chrome, but in firefox its just showing
black box in place of images.

—
Reply to this email directly or view it on GitHub
#671 (comment).

priyaD15 · 2016-02-12T04:18:55Z

getImgData: function (container, pdf) {
$e = container;
var chartContainer = document.getElementById($e.attr("id"));
var heading = $(chartContainer).find(".panel-heading").text();
var breadcrumb = "";
$(chartContainer).find(".breadcrumb li").each(function () {
breadcrumb = breadcrumb.concat($(this).text() + " / ");
});
breadcrumb = breadcrumb.substr(0, breadcrumb.length - 2);
console.log(breadcrumb);
var lastTimeStamp =
$(chartContainer).find(".gchart-last-timestamp").text();
// all predefined page properties 'a4': [595.28, 841.89]
var pageFormat = 'a4';
var pageH = 841.89; //in point
var pageW = 595.28;
var margin = { top: 50, right: 20, bottom: 50, left: 20 };
var box = { top: 0, left: 0, height: 500, width: 500 }
box.top = margin.top + ((pageH - margin.top - box.height -
margin.bottom) / 2)
box.left = margin.left + ((pageW - margin.left - box.width -
margin.right) / 2)

    var headingBox = { top: box.top, left: box.left, height: 40, width:

box.width }

    var headingPosition = { top: headingBox.top + (headingBox.height /

};
var breadcrumbPos = { top: headingPosition.top + 30 +
(headingBox.height / 2) };
var lastTimeStampPos = { top: breadcrumbPos.top + 20 }

    var chartProp = {
        height: 350,
        width: 450,
        top: lastTimeStampPos.top + 20,
        left: 0
    }
    chartProp.left = margin.left + ((pageW - margin.left - margin.right

chartProp.width) / 2)
var chartArea =
chartContainer.getElementsByTagName('svg')[0].parentNode;
//console.log(chartArea);
// works for chrome, firefox, opera, safari
var isFirefox = typeof InstallTrigger !== 'undefined';
var isChrome = !!window.chrome && !!window.chrome.webstore;
```
if (isChrome) { var svg = chartArea.innerHTML; } // for chrome
else if (isFirefox) { var svg = '<svg>' + chartArea.innerHTML +
```
''; } // this is for firefox
else { var svg = chartArea.innerHTML; } // for all other
```
var chartDoc = chartContainer.ownerDocument;
var canvas = chartDoc.createElement('canvas');
//canvas.parentNode.removeChild(canvas);
canvas.setAttribute('width', (chartProp.width) + "pt");
canvas.setAttribute('height', (chartProp.height) + "pt");
chartDoc.body.appendChild(canvas);
canvg(canvas, svg);
var imgData = canvas.toDataURL('image/JPEG');
pdf.setDrawColor(32, 169, 224);
pdf.rect(box.left, box.top, box.width, box.height, 'S');
pdf.setFillColor(32, 169, 224);
pdf.rect(headingBox.left, headingBox.top, headingBox.width,
```
headingBox.height, 'F');
pdf.setFontSize(15);
pdf.setTextColor(255, 255, 255);
pdf.myText(heading, { align: "center" }, 0, headingPosition.top);
pdf.setTextColor(0, 0, 0);
pdf.setFontSize(10);
pdf.text(breadcrumb, chartProp.left, breadcrumbPos.top);
pdf.text(lastTimeStamp, chartProp.left, lastTimeStampPos.top);
// addImage = x, y, w, h
```
pdf.addImage(imgData, "JPEG", chartProp.left, chartProp.top,
```
chartProp.width, chartProp.height);
canvas.parentNode.removeChild(canvas);
return imgData;

the problem is with above function...
see comment for firefox, it solved the issue partially. now in place of
black box, i m able to show the image. but image is beind clipped partially.
Thats because of size of svg in firefox is interpreted differently ... so
if could solve my this issue, then it would be great help.

Thanks .

On Wed, Feb 3, 2016 at 9:01 PM, Sumeet Kumar notifications@github.com
wrote:

If you can post some relevant code then we might can help.
On Jan 22, 2016 4:26 PM, "priyaD15" notifications@github.com wrote:

hi,
can you help in my issue?
the jsPdf is working fine with chrome, but in firefox its just showing
black box in place of images.

—
Reply to this email directly or view it on GitHub
#671 (comment).

—
Reply to this email directly or view it on GitHub
#671 (comment).

Regards,
Priya Deshmukh

"Life is either an adventure, or nothing!"

Uzlopak · 2017-03-16T14:27:36Z

#12

Uzlopak · 2018-02-15T02:23:30Z

Duplicate of #12

Uzlopak marked this as a duplicate of #12 Feb 15, 2018

Uzlopak closed this as completed Feb 15, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UTF – 8 character support ( Chinese character support ) #671

UTF – 8 character support ( Chinese character support ) #671

sumeetpri commented Jan 15, 2016

wancheng commented Jan 15, 2016

sumeetpri commented Jan 15, 2016

wancheng commented Jan 19, 2016

ryanlin1986 commented Jan 19, 2016

priyaD15 commented Jan 22, 2016

sumeetpri commented Feb 3, 2016

priyaD15 commented Feb 12, 2016

Uzlopak commented Mar 16, 2017

Uzlopak commented Feb 15, 2018

UTF – 8 character support ( Chinese character support ) #671

UTF – 8 character support ( Chinese character support ) #671

Comments

sumeetpri commented Jan 15, 2016

index.html

script2.js

wancheng commented Jan 15, 2016

sumeetpri commented Jan 15, 2016

wancheng commented Jan 19, 2016

ryanlin1986 commented Jan 19, 2016

priyaD15 commented Jan 22, 2016

sumeetpri commented Feb 3, 2016

priyaD15 commented Feb 12, 2016

Uzlopak commented Mar 16, 2017

Uzlopak commented Feb 15, 2018