如何使用Javascript把文字和图片导出PDF文件

如何使用Javascript把文字和图片导出PDF文件

                首先应到http://parall.ax/products/jspdf站点下载jsPDF插件包。如下图所示：

图1

接着您可以研究一下jsPDF中添加图片，添加文字，设置字体，画图和添加页的基本代码。如下添加图片的代码。

var getImageFromUrl = function(url, callback) {

                var img= new Image, data, ret={data: null, pending: true};

                img.onError= function() {

                                thrownew Error('Cannot load image: "'+url+'"');

                }

                img.οnlοad= function() {

                                varcanvas = document.createElement('canvas');

                                document.body.appendChild(canvas);

                                canvas.width= img.width;

                                canvas.height= img.height;

 

                                varctx = 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;

 

                returnret;

}

 

// Since images are loaded asyncronously, we must wait tocreate

// the pdf until we actually have the image data.

// If we already had the jpeg image binary data loaded into

// a string, we create the pdf without delay.

var createPDF = function(imgData) {

                var doc= new jsPDF();

 

                doc.addImage(imgData,'JPEG', 10, 10, 50, 50);

                doc.addImage(imgData,'JPEG', 70, 10, 100, 120);

 

                //Output as Data URI

                doc.output('datauri');

}

 

getImageFromUrl('thinking-monkey.jpg', createPDF);

 

添加文字导出PDF的代码：

var name = prompt('What is your name?');

var multiplier = prompt('Enter a number:');

multiplier = parseInt(multiplier);

 

var doc = new jsPDF();

doc.setFontSize(22);     

doc.text(20, 20, 'Questions');

doc.setFontSize(16);

doc.text(20, 30, 'This belongs to: ' + name);

 

for(var i = 1; i <= 12; i ++) {

                doc.text(20,30 + (i * 10), i + ' x ' + multiplier + ' = ___');

}

 

doc.addPage();

doc.setFontSize(22);

doc.text(20, 20, 'Answers');

doc.setFontSize(16);

 

for(var i = 1; i <= 12; i ++) {

                doc.text(20,30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));

}             

doc.save('Test.pdf');

上面只是简单的例子，那我在项目中是如何实现Javascript导出PDF文件呢？把下载的PDF插件包放到相应的目录下。在调用的程序页面引入PDF插件包。如下图所示：

图2

 

然后装载需要导出PDF文件的图片信息。

dtBrochure= objBrochure.GetByMIID(ModuleInstanceID)

 

            If dtBrochure.Rows.Count > 0 Then

                intBrochureWidth =dtBrochure(0).BrochureWidth

                intBrochureHeight = (600 * (CLng(intBrochureWidth))) / 800

                brochurePhotoDataTable =objBrochurePhoto.GetPhotoList(ModuleInstanceID, 0, 0, totalRecords, totalPages)

                intBrochureNum =brochurePhotoDataTable.Rows.Count

                If (brochurePhotoDataTable.Rows.Count > 0) Then

                    For i AsInteger = 0 TobrochurePhotoDataTable.Rows.Count - 1

                        pRow =brochurePhotoDataTable.Rows(i)

                        sb.Append("<divstyle=""background-image:url('"+ JavaScriptEncode(VirtualPathToLarge & pRow.FileName) + "')""></div> ")

                        sbJs.AppendLine("<img id=""imgPdf" +i.ToString + """src='" +JavaScriptEncode(VirtualPathToLarge & pRow.FileName) + "' />")

                    Next

                    litFlipbook.Text =sb.ToString

                    litJstext.Text =sbJs.ToString

                EndIf

                

            EndIf

 

前端页面用

<divid="Brochure-pnl-pdf"style="display:none;">

    <asp:LiteralID="litJstext"runat="server"/>

</div>

接收即可。

最后初始化导出PDF的对象。

Downloadify.create('downloadify',{

            filename: 'ExampleTest.pdf',

            data: function(){

                var doc = new jsPDF();

                var imgData;

                var img;

                var ctx;

                var pages = $(".flipbook").turn("pages");

                for (var i=0;i<pages;i++){

                   img=document.getElementById("imgPdf" + i);

                    var canvas =document.createElement('canvas');

                   document.body.appendChild(canvas);

                    canvas.width = 900;

                    canvas.height = 500;

                    ctx = canvas.getContext('2d');

                    ctx.drawImage(img, 0, 0);

                    imgData = canvas.toDataURL('image/jpeg').slice('data:image/jpeg;base64,'.length);

                    imgData = atob(imgData);

                   document.body.removeChild(canvas);

                    doc.addImage(imgData, 'JPEG', 10, 10);

                    if(i+1<pages){doc.addPage();}

                }

                doc.save('Brochure.pdf');

                return;

                //returndoc.output('dataurlnewwindow');

            },

            onComplete: function(){ alert('Your File Has Been Saved!');},

            onError: function(){ alert('You must put something in the File Contents or there willbe nothing to save!'); },

            swf: '<%=strStaticPath %>/GlobalAssets/Scripts/ThirdParty/jsPDF0.9.2/libs/downloadify/media/downloadify.swf',

            downloadImage: '<%=strStaticPath %>/GlobalAssets/Scripts/ThirdParty/jsPDF0.9.2/libs/downloadify/images/download.png',

            width: 30,

            height: 30

        });

 

这样在页面上就可显示导出PDF的功能按钮，如下图所示。

图3