里讲一种实现起来比较简单的html转pdf下载的实现。

依赖插件

html2canvas jspdf

思路

通过html2canvas，我们可以将指定的一个dom元素，渲染到canvas中，然后从canva中获得该图片，并将图片通过jspdf来生成。

代码

function createPdf (selector,pagesize,direction,title){
    var key = pagesize +''+direction;
    var settings = {
        '00' : {
            pdf : {orientation : 'portrait',format : 'a4',unit : 'px'},
            width : 448,
            height : 632.5
        },
        '01' : {
            pdf : {orientation : 'landscape',format : 'a4',unit : 'px'},
            width : 632.5,
            height : 448
        },
        '10' : {
            pdf : {orientation : 'portrait',format : 'a3',unit : 'px'},
            width : 632.5,
            height : 894.2
        },
        '11' : {
            pdf : {orientation : 'landscape',format : 'a3',unit : 'px'},
            width : 894.2,
            height : 632.5
        }
    };
    var set = settings[key];
    var doc = new jsPDF(set.pdf);
    var arr = [];//根据顺序保存
    var $arr = $(selector);
    function tempCreate(){
        if($arr.length == 0){//没有啦
            //执行生成
            tempPdf();
        }else{
            var $dom = $arr.splice(0,1);
            html2canvas($dom[0]).then(canvas => {
                var dataurl = canvas.toDataURL('image/png');
                arr.push(dataurl);
                tempCreate();
            });
        }
    }
    function tempPdf(){
        arr.forEach((item,i)=>{
            if(i !== 0){
                doc.addPage();
            }
            doc.addImage(item,'png',-1,-1,set.width,set.height);//根据不同的宽高写入
        })
        //根据当前的作业名称
        doc.save(title+'.pdf');
    }
    tempCreate();
}

需要指定容器(依赖jquery),然后指定纸张A4或 A3，以及横纵向。

//调用
createPdf('.single-page',0,0,'test')

当然，如果是数据量很大的话，就不建议在前台生成了，最好还是放在后端去做。个人测试过，做A4的图片生成PDF，当数量大约在100左右的时候，浏览器就崩溃了，如果只是几页的数据的话，这个方式还是很方便的。

Ps：浏览器要是现代浏览器哈。

参考资料

html2canvas : http://html2canvas.hertzen.com/ jspdf :https://github.com/MrRio/jsPDF

载PDF或excel有很多方法，Excel很简单，但是PDF通常在CSS和其他很多方面有问题。我对此做了更多的研究，发现使用CutyCapt.exe将网页捕获为PDF或图像更方便。

CutyCapt是什么?

CutyCapt是一个小型的跨平台命令行工具，用于捕获WebKit将web页面呈现为各种矢量和位图格式的方法，包括SVG、PDF、PS、PNG、JPEG、TIFF、GIF和BMP。请参阅IECapt以获取基于Internet Explorer的类似工具。

要求

1. 创建PDF的过程是使用一个名为CutyCapt.exe的可执行文件来完成的，下载exe并将其添加到解决方案中。
2. 如果我们使用ASP.NET创建项目时，可在重定向页面上调用exe，这个页面将是空白的，在页面加载中有以下代码。

实现

1. 创建一个文件名和路径：为了使文件名唯一，我更推荐使用GUID(这是开发人员根据需求和逻辑做出的选择)，然后将文件URL添加到一个字符串中。

string filename = Guid.NewGuid() + ".pdf"; //unique file name  
// url of the pdf file name   
string url = “http://example.org” +"/CutyCapt/" + filename; 

2. 可执行文件的位置：cutycap.exe的位置被分配给一个字符串。

//location of Executable  
string cutycaptLocation = "D:\\CutyCapt";  

3. 命令创建：用于在ASP中创建命令。NET中，我们使用ProcessStartInfo对象。将不同的参数作为属性赋给对象，如下所示：

a. CreateNoWindow
b. WorkingDirectory
c. FileName
d. Arguments
- 需要转换成PDF格式的网页链接
- 目标文件夹
e. UseShellExecute

// Command for execution   
System.Diagnostics.ProcessStartInfo pi = new System.Diagnostics.ProcessStartInfo();  
pi.CreateNoWindow = false;  
pi.WorkingDirectory = cutycaptLocation;  
pi.FileName = cutycaptLocation + "\\CutyCapt.exe";  
pi.Arguments = "--url=" + link + " --out-format=pdf -out=" + System.IO.Path.GetFullPath(Server.MapPath("~/CutyCapt")) + "\\" + filename;  
pi.UseShellExecute = false;

4. 进程执行：ASP中的进程对象.Net用于执行进程，以获取创建的信息。

try {  
    // Start the process with the info we specified.   
    // Call WaitForExit and then the using statement will close.   
    using(System.Diagnostics.Process exeProcess = System.Diagnostics.Process.Start(pi)) {  
        exeProcess.WaitForExit();  
    }  
}   
catch (Exception ex)   
{  
    Response.Write(ex.Message);  
}

5. 重定向到PDF：创建PDF后，浏览器会重定向到加载创建的PDF的PDF链接。

Response.Redirect(url);