Question

我编写了一个简单的代码，它从用户那里获取输入（基本上是一个html表单），然后根据用户输入创建一个PDF证书。我正在使用jsPDF库来生成PDF。在Firefox上运行时，代码工作正常。用户提交表单后，将在PDF视图中打开证书。但是，如果我在chrome上运行相同的代码（html文件），则不会打开PDF视图，而是在同一页面上生成证书图像。请参考下面的代码。

<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：如果使用Brackets编辑器触发，则适用于Chrome。但是，不是直接在Chrome上运行文件时。

Answer 1

为图像添加数据网址（template.png）解决了这个问题。

生成数据网址here

使用jsPDF在同一HTML页面上显示图像，而不是在Chrome

1 个答案: