我编写了一个简单的代码，它接受用户的输入(基本上是 html 表单)，然后根据用户输入创建 PDF 证书。我正在使用 jsPDF 库来生成 PDF。该代码在 Firefox 上运行时工作得非常好。用户提交表单后，证书将在 PDF View 中打开。但是，如果我在 Chrome 上运行相同的代码(html 文件)，则不会打开 PDF View ，而是在同一页面上生成证书图像。请引用下面我的代码。
<html>
<body>
<form id="frm1">
Application <input type="text" name="app"><br>
Initiative <input type="text" name="iniative"><br><br>
Description-Problem / Scope <input type="text" name="initi"><br><br>
Describe solution proposed <input type="text" name="dsolution"><br><br>
Approx effort saved per month <input type="text" name="approx"><br><br>
Ticket reduction in % <input type="text" name="tic"><br><br>
<input type="button" onclick="javascript:load123()" value="Submit">
</form>
<script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui- 1.8.17.custom.min.js"></script>
<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script>
function load123()
{
if( frm1.initi.value.length == "" )
{
alert( "Please provide your Application name " );
document.myForm.Name.focus() ;
return false;
}
var getImageFromUrl = function(url, callback) {
var img = new Image(), data, ret = {
data: null,
pending: true
};
img.onError = function() {
throw new Error('Cannot load image: "'+url+'"');
};
img.onload = function() {
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
// Grab the image as a jpeg encoded in base64, but only the data
data = canvas.toDataURL('image/jpeg').slice('data:image/jpeg;base64,'.length);
// Convert the data to binary form
data = atob(data);
document.body.removeChild(canvas);
ret['data'] = data;
ret['pending'] = false;
if (typeof callback === 'function') {
callback(data);
}
};
img.src = url;
return ret;
};
var createPDF = function(imgData) {
var doc = new jsPDF('landscape');
doc.addImage(imgData, 'JPEG', 18, 20, 270, 165);
doc.setFontSize(40);
doc.setTextColor(0,0,255);
doc.setFont("helvetica");
doc.setFontType("bold");
doc.text(48, 50, 'Continous Improvement Initiative');
doc.setFontSize(25);
doc.setTextColor(255,0,0);
doc.setFont("times");
doc.setFontType("bold");
doc.text(48, 70, 'Application: ');
doc.setFontSize(25);
doc.setTextColor(0,0,0);
doc.setFont("times");
doc.setFontType("bold");
doc.text(96, 70, frm1.app.value);
doc.setFontSize(25);
doc.setTextColor(255,0,0);
doc.setFont("times");
doc.setFontType("bold");
doc.text(48, 85, 'Description - Problem / Scope Statement: ');
doc.setFontSize(25);
doc.setTextColor(0,0,0);
doc.setFont("times");
doc.setFontType("bold");
doc.text(48, 90, frm1.initi.value);
doc.setFontSize(25);
doc.setTextColor(255,0,0);
doc.setFont("times");
doc.setFontType("bold");
doc.text(48, 105, 'Description - Solution Proposed: ');
doc.setFontSize(25);
doc.setTextColor(0,0,0);
doc.setFont("times");
doc.setFontType("bold");
doc.text(173, 105, frm1.dsolution.value);
doc.setFontSize(25);
doc.setTextColor(255,0,0);
doc.setFont("times");
doc.setFontType("bold");
doc.text(48, 120, 'Approx. efforts saved / Month: ');
doc.setFontSize(25);
doc.setTextColor(0,0,0);
doc.setFont("times");
doc.setFontType("bold");
doc.text(165, 120, frm1.approx.value);
doc.setFontSize(25);
doc.setTextColor(255,0,0);
doc.setFont("times");
doc.setFontType("bold");
doc.text(48, 135, 'Ticket Resolution in %: ');
doc.setFontSize(25);
doc.setTextColor(0,0,0);
doc.setFont("times");
doc.setFontType("bold");
doc.text(140, 135, frm1.tic.value);
doc.output('datauri');
}
getImageFromUrl('template.png', createPDF);
}
</script>
</body>
</html>
要测试它，请使用名称为“template.png”的任何图像。
PS:如果使用括号编辑器触发，它可以在 Chrome 上运行。但是，当您直接在 Chrome 上运行该文件时则不然。
最佳答案
添加图像 (template.png) 的数据 url 解决了问题。
生成数据url here
关于javascript - 在 Chrome 上运行时，图像使用 jsPDF 显示在同一 HTML 页面上，而不是打开 PDF View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34750631/