当运行在 Chrome 上时，图像使用 jsPDF 显示在同一 HTML 页面上，而不是打开 PDF 视图

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: 如果使用括号编辑器触发它，它适用于 Chrome。但是，当你运行文件直接放在 Chrome.

时就不行了

Answer 1

为图像 (template.png) 添加数据 url 解决了问题。

生成数据urlhere

当运行在 Chrome 上时，图像使用 jsPDF 显示在同一 HTML 页面上，而不是打开 PDF 视图

Image is being displayed on the same HTML page using jsPDF instead of opening a PDF view when run on Chrome

javascript

html

google-chrome

jspdf

当 运行 在 Chrome 上时，图像使用 jsPDF 显示在同一 HTML 页面上，而不是打开 PDF 视图

Image is being displayed on the same HTML page using jsPDF instead of opening a PDF view when run on Chrome

javascript

html

google-chrome

jspdf

当运行在 Chrome 上时，图像使用 jsPDF 显示在同一 HTML 页面上，而不是打开 PDF 视图