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

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

javascript html google-chrome

Javascript 在Chrome上运行时，图像将使用jsPDF显示在同一HTML页面上，而不是打开PDF视图,javascript,html,google-chrome,jspdf,Javascript,Html,Google Chrome,Jspdf,我已经编写了一个简单的代码，它接受用户的输入（基本上是一个html表单），然后根据用户的输入创建一个PDF证书。我正在使用jsPDF库生成PDF。当在Firefox上运行时，代码运行得非常好。用户提交表单后，证书将在PDF视图中打开。但是，如果我在chrome上运行相同的代码（html文件），则不会打开PDF视图，而是在同一页面上生成证书图像。请参考下面我的代码 <html> <body> <form id="frm1"> Application <i

我已经编写了一个简单的代码，它接受用户的输入（基本上是一个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>


应用程序

主动性


说明问题/范围


描述提议的解决方案


每月节省的大约工作量


门票减少%


函数load123（）
{
如果（frm1.initi.value.length==“”）
{
警报（“请提供您的应用程序名称”）；
document.myForm.Name.focus（）；
返回false；
} 
var getImageFromUrl=函数（url，回调）{
var img=new Image（），data，ret={
数据：空，
待定：真
};
img.onError=函数（）{
抛出新错误（'无法加载图像：“+url+”）；
};
img.onload=函数（）{
var canvas=document.createElement（'canvas'）；
document.body.appendChild（画布）；
canvas.width=img.width；
canvas.height=img.height；
var ctx=canvas.getContext（'2d'）；
ctx.drawImage（img，0,0）；
//以base64编码的jpeg格式获取图像，但仅获取数据
data=canvas.toDataURL（'image/jpeg'）.slice（'data:image/jpeg；base64'.length）；
//将数据转换为二进制形式
数据=atob（数据）；
document.body.removeChild（画布）；
ret['data']=数据；
ret['pending']=false；
if（回调类型==='function'）{
回调（数据）；
}
};
img.src=url；
返回ret；
};
var createPDF=函数（imgData）{
var doc=新的jsPDF（“景观”）；
addImage文件（imgData，'JPEG'，18,20,270,165）；
文件setFontSize（40）；
setTextColor文件（0,0255）；
setFont文件（“helvetica”）；
文件setFontType（“粗体”）；
文件文本（48、50，“持续改进倡议”）；
文件setFontSize（25）；
文件setTextColor（255,0,0）；
setFont文件（“时代”）；
文件setFontType（“粗体”）；
文件文本(48,70,"申请");；
文件setFontSize（25）；
文件setTextColor（0,0,0）；
setFont文件（“时代”）；
文件setFontType（“粗体”）；
文件文本（96，70，frm1.应用值）；
文件setFontSize（25）；
文件setTextColor（255,0,0）；
setFont文件（“时代”）；
文件setFontType（“粗体”）；
文件文本（48、85，“说明-问题/范围声明：”）；
文件setFontSize（25）；
文件setTextColor（0,0,0）；
setFont文件（“时代”）；
文件setFontType（“粗体”）；
文件文本（48，90，frm1初始值）；
文件setFontSize（25）；
文件setTextColor（255,0,0）；
setFont文件（“时代”）；
文件setFontType（“粗体”）；
文件文本（48105，“说明-建议的解决方案：”）；
文件setFontSize（25）；
文件setTextColor（0,0,0）；
setFont文件（“时代”）；
文件setFontType（“粗体”）；
文档文本（173105，frm1.dsolution.value）；
文件setFontSize（25）；
文件setTextColor（255,0,0）；
setFont文件（“时代”）；
文件setFontType（“粗体”）；
文件文本（48120，“节省的工作量/月：”）；
文件setFontSize（25）；
文件setTextColor（0,0,0）；
setFont文件（“时代”）；
文件setFontType（“粗体”）；
文件文本（165、120、frm1.近似值）；
文件setFontSize（25）；
文件setTextColor（255,0,0）；
setFont文件（“时代”）；
文件setFontType（“粗体”）；
文件文本（48135，‘票证解析%：’）；
文件setFontSize（25）；
文件setTextColor（0,0,0）；
setFont文件（“时代”）；
文件setFontType（“粗体”）；
文件文本（140、135、frm1.tic.value）；
文档输出（'datauri'）；
}
getImageFromUrl（'template.png'，createPDF）；
}

要测试它，请使用名为“template.png”的任何图像

PS:如果使用括号编辑器触发，它在Chrome上工作。但是，当您直接在Chrome上运行文件时，情况就不一样了。

添加图像的数据url（template.png）解决了这个问题

生成数据url