材料图标错误 - 在HTML2Canvas运行后,图标变为像“S”“T”“A”“R”的字符

时间:2017-04-21 13:22:14

标签: javascript jquery jspdf html2canvas

在运行html2canvas / jspdf脚本之前,打开对话框的材质图标看起来应该在页面上显示。此图标将打开一个对话框菜单,其中包含导出为ex​​cel和pdf功能。单击pdf选项并运行下面的脚本时,用于打开对话框的图标将由以下两个库之一jspdf或html2canvas重新编码。它将Md-icon标签内的文本转换为自己行上的单个租船人。我希望有人遇到类似的事情。

<md-icon>assignment_late</md-icon>

打开对话框后 - > SaveToPDF / clickeEvent - &gt;运行脚本然后材料图标消失,因为内部的html看起来如此

<md-icon>
"a"
"s"
"s"
"i"
"n"
"g"
"m"
"e"
"n"
"t"
"_"
"l"
"a"
"t"
"e"
</md-icon>

HTML2Canvas / JSPDF的脚本

html2canvas(source, {
canvas:canvas,
onrendered: function (canvas) {
//! MAKE YOUR PDF
var pdf = new jsPDF('p', 'pt', 'a3');
for (var i = 0; i <= source.clientHeight / 980; i++) {
//! This is all just html2canvas stuff
var srcImg = canvas;
var sX = 0;        //sourceImage x coord
var sY = 0;  // start 980 pixels down for every new page
var sWidth = srcImg.width;  //source image width
var sHeight = srcImg.height; //source image height        
var dX = 0;        //destination canvas x coord
var dY = 0;        //destination canvas y coord
var dWidth = srcImg.width;  //destination canvas width
var dHeight = srcImg.height; //destination canvas height
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();
var hours = today.getHours();
var minutes = today.getMinutes();
var previewPane = document.getElementById('previewPane');
var title = edc.exportTitle;
window.onePageCanvas = document.createElement("canvas");
onePageCanvas.setAttribute('width', 900);
onePageCanvas.setAttribute('height', 980);
var ctx = onePageCanvas.getContext('2d');
ctx.drawImage(srcImg, sX, sY, sWidth, sHeight, dX, dY, dWidth, dHeight);
// document.body.appendChild(canvas);
var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);

var width = onePageCanvas.width;
var height = onePageCanvas.clientHeight;

//! If we're on anything other than the first page,
// add another page
if (i > 0) {
pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)
}
//! now we declare that we're working on that page
pdf.setPage(i + 1);
//! now we add content to that page!
var left = (900 - dWidth) * 0.5;
var top = (980 - dHeight) * 0.5;

pdf.addImage(canvasDataURL, 'PNG', left, top, width, height);
}

0 个答案:

没有答案