[英]I can't seem to load an Image to a PDF file using jsPDF
我正在尝试从HTML文档中生成一个HTML文档,在我的JavaScript代码中输入一个输入和一个预加载的图像,这是以下代码:
<html>
<head>
<title>
Generar pdf
</title>
</head>
<body>
<input type = "text" id = "jjj">
<button id="button" onclick="generar();"></button>
<script src = "jsPDF-1.3.2/dist/jspdf.debug.js"></script>
<script src = "pdf.js"></script>
</body>
</html>
Java脚本
var input = document.getElementById('jjj');
var pdf = new jsPDF();
function generar(){
var texto = input.value;
var imgData = 'https://docs.gimp.org/es/images/tutorials/quickie-jpeg-
100.jpg';
pdf.addImage(imgData, 'JPG', 15, 40, 180, 160);
pdf.text(30, 30, texto);
pdf.save('my_pdf.pdf');
}
而且它不起作用。 它使用jsut处理文本,但不处理Image。 任何人的帮助,将不胜感激。
您不能使用直接图片网址。 您需要将图像转换为base64,然后将其添加为pdf。 同样,由于跨源请求,使用外部图像将在Chrome / Firefox中生成错误。
以下是完整的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type = "text" id = "jjj">
<button id="button" onclick="genratePDF();"></button>
<script src = "jspdf.debug.js"></script>
<script src = "jspdf.min.js"></script>
<script>
var input = document.getElementById('jjj');
// var imgData = 'https://docs.gimp.org/es/images/tutorials/quickie-jpeg-100.jpg';
var imgData = 'testimg.jpg';
function genratePDF() {
getDataUri(imgData, function (dataUri) {
generar(dataUri);
});
}
function getDataUri(url, cb)
{
var image = new Image();
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
//next three lines for white background in case png has a transparent background
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#fff'; /// set white fill style
ctx.fillRect(0, 0, canvas.width, canvas.height);
canvas.getContext('2d').drawImage(this, 0, 0);
cb(canvas.toDataURL('image/jpeg'));
};
image.src = url;
}
function generar(img) {
var texto = input.value;
var pdf = new jsPDF();
pdf.addImage(img, 'JPG', 15, 40, 100, 100);
pdf.text(30, 30, texto);
pdf.save('my_pdf.pdf');
}
</script>
</body>
</html>
主要变化是 getDataUri(); 此功能生成您提供的图像的base64图像。 然后在Callback中触发generar()生成PDF
function getDataUri(url, cb)
{
var image = new Image();
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
//next three lines for white background in case png has a transparent background
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#fff'; /// set white fill style
ctx.fillRect(0, 0, canvas.width, canvas.height);
canvas.getContext('2d').drawImage(this, 0, 0);
cb(canvas.toDataURL('image/jpeg'));
};
image.src = url;
}
这个问题可以帮助我在此解决方案中使用jspdf将图像网址转换为pdf
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.