里講一種實現起來比較簡單的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);