PDF网页在线预览

C# ASP.NET环境下，利用PDF.JS实现。其实99%都是页面JavaScipt程序，C#仅用于从后台获取PDF文件路径。

程序目的适用于，在如IE等无法在线预览PDF文件，而是直接弹出下载链接的浏览器中在线预览文件的情况。

使用的库如下；

可在Github的PDF.JS项目中获取。大多使用办法都是利用项目中的viewer.html实现在线预览。但本文直接使用页面画板标签实现。

代码如下：

网页HTML

                            
    <%=pdfurl %>
    
    
 
        上一页 
        下一页 
        页数:  /  
    
 

JavaScript

通过以上程序，即可实现PDF在页面上，已画板形式显示，每次展示一页，翻页查看。

在原程序上，增加了自动获取画板高度，根据页面宽度，自动调整PDF缩放规模的处理。

 

曾经意图将PDF自动转化为PNG图片格式存储，便于调用。也是使用PDF.JS实现。

具体方法是将页面画板canvas中的数据，通过Ajax传送到.cs文件中进行处理。但实现过程中遇到的问题是，前端向后端发送数据的速度 非常 非常 非常 缓慢，仅一页pdf就要等4,5分钟，还有极大可能完全卡死。偶尔完成的情况下观察，图片也就20多K。

不知道这种情况是否正常，Ajax就无法进行此类规模数据的传送。还是我的代码出现了一些问题。

页面代码如下：

    // PDFJS.disableStream = true;
    $("#export").attr("disabled", "disabled"); //禁用导出图片按钮
    var pdfFile;
    $('#pdf').change(function() {
        var pdfFileURL = $('#pdf').val();
        if(pdfFileURL) {
            $("#imgDiv").empty();//清空上一PDF文件展示图
            var files = $('#pdf').prop('files'); //获取到文件
            var fileSize = files[0].size;
            var mb;

            if(fileSize) {
                mb = fileSize / 1048576;
                if(mb > 10) {
                    alert("文件大小不能>10M");
                    return;
                }
            }


            $("#export").removeAttr("disabled", "disabled");
            $("#pdfName").text(files[0].name).attr("title",files[0].name);
            $("#sizeText").text(mb.toFixed(2) + "Mb");

            /*pdf.js无法直接打开本地文件,所以利用FileReader转换*/
            var reader = new FileReader();
            reader.readAsArrayBuffer(files[0]);
            reader.onload = function(e) {
                var myData = new Uint8Array(e.target.result)
                var docInitParams = {
                    data: myData
                };
                var typedarray = new Uint8Array(this.result);
                PDFJS.getDocument(typedarray).then(function(pdf) { //PDF转换为canvas
                    $("#imgDiv").css("border", "0"); //清除文本、边框
                    if(pdf) {
                        var pageNum = pdf.numPages;
                        $("#pagesText").text(pageNum);

                        for(var i = 1; i <= pageNum; i++) {
                            var canvas = document.createElement('canvas');
                            canvas.id = "pageNum" + i;
                            $("#imgDiv").append(canvas);
                            var context = canvas.getContext('2d');
                            openPage(pdf, i, context);
                        }
                    }
	            });
	        };
	    }
    });

    function openPage(pdfFile, pageNumber, context) {
        var scale = 2;
        pdfFile.getPage(pageNumber).then(function(page) {
            viewport = page.getViewport(scale); // reference canvas via context
            var canvas = context.canvas;
            canvas.width = viewport.width;
            canvas.height = viewport.height;
            canvas.style.width = "100%";
            canvas.style.height = "100%";
            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext);
        });
		return;
    };

    $("#export").click(function () {

        var canvas = document.getElementById("pageNum1");
        var images = canvas.toDataURL();
        dcce_voa.Office.applist_pdftoimg.Save(images);

    });

.cs代码：

[AjaxMethod()]
public void Save(string imgData)
{
    string filepath = "";
    //string imgData = Request["url"].ToString();
    var date = DateTime.Now.ToString("yyyyMMddmsms");
    if (imgData.StartsWith("data:image/png;base64") == true)
    {
        var base64 = imgData.Substring(22);
        byte[] bytes = Convert.FromBase64String(base64);
        MemoryStream memStream = new MemoryStream(bytes);
        BinaryFormatter binFormatter = new BinaryFormatter();
        var img = System.Drawing.Image.FromStream(memStream);
        filepath = "~/images/output/" + date + ".png";
        if (!Directory.Exists(Server.MapPath("~/images/output")))
        {
            Directory.CreateDirectory(Server.MapPath("~/images/output"));
        }
        img.Save(Server.MapPath(filepath));
    }
}