在Asp.Net MVC中使用pdf.js快速渲染PDF

首先，去官网下载最新版的pdf.js，注意下载 Prebuilt (ES5-compatible) 稳定版。

如果不用稳定版，而改用最新测试版，在IE下会出现字符渲染遗漏问题。

官网下载地址：http://mozilla.github.io/pdf.js/getting_started/#download

除了 pdf.js 和 pdf.worker.js 这两个文件外，其他文件都用不上。

在ASP.NET页面中引用pdf.js，注意不可引用pdf.worker.js，否则会拖慢PDF渲染速度。

实际项目如果需要使用 Vue ，请选择Vue 2而不要使用Vue 3，因为IE不支持。

在文档就绪或Vue mounted后，可以使用以下代码下载PDF：

//这里使用一个文件下载链接而不是实际文件地址（便于实施权限控制），实现代码放后面。
var url = '@Url.Content("~/show/file/")' + '@ViewBag.data_id';

//设置worker
pdfjsLib.GlobalWorkerOptions.workerSrc = '@Url.Content("~/Content/lib/pdfjs/lib/pdf.worker.js")';

//下载PDF文档
var loadingTask = pdfjsLib.getDocument(url);

//对于比较大的PDF文件，可以显示加载进度
loadingTask.onProgress = function (_ref) {
    var loaded = _ref.loaded,
        total = _ref.total;

    console.log(loaded+ "/" + total);
};

//PDF下载完成
loadingTask.promise.then(function (pdf) {
    //看看总共多少页
    console.log(pdf.numPages);

    pdfDoc = pdf;
    //渲染第一页
    that.renderPage(1);

}, function (err) {
    console.log(err);
});

渲染函数如下：

renderPage: function (num) {

    pdfDoc.getPage(num).then(function (page) {
    
        //页面中用于渲染PDF页面的容器
        var pdfContainer = document.getElementById('de_pdf_container');
        
        //获取适合目标容器宽度的viewport
        var viewport = page.getViewport({
            scale: 1
        });

        //获取PDF容器的宽度
        var desiredWidth = document.getElementById('xxxx').clientWidth;
        var scale = desiredWidth / viewport.width;
        var scaledViewport = page.getViewport({
            scale: scale
        });
        //为每一页生产页面元素
        var pageDiv = document.createElement('div');
        pageDiv.setAttribute('id', 'page-' + page.pageNumber);
        pageDiv.setAttribute('style', 'position: relative');

        var canvas = document.createElement('canvas');
        pageDiv.appendChild(canvas);
        var context = canvas.getContext('2d');
        canvas.height = scaledViewport.height;
        canvas.width = scaledViewport.width;
        
        //定义合适的Context
        var renderContext = {
            canvasContext: context,
            viewport: scaledViewport
        };
        //生产渲染任务
        var task = page.render(renderContext);
        //将动态生产的页面添加到容器
        pdfContainer.appendChild(pageDiv);
        //这里选择一页一页的渲染，提升页面加载速度，同时还可以避免页面渲染顺序错乱。
        task.promise.then(function () {
            //这行代码用于VUE的首页渲染完成标记，可以删除
            that.pageLoading = false;
            //渲染下一页
            if (num + 1 <= pdfDoc.numPages) {
                that.renderPage(num + 1);
            }
        }, function (err) {
            console.log(err);
        });
    });
}

后端，获取文件的代码参考如下：

[AcceptVerbs("GET", "POST")]
public ActionResult File(string id)
{
    try
    {
        //我这里用了一个json配置文件，记录实际的PDF文件的id和路径。
        //类似于这样的结构：
        //{
        //  "PDFs": [
        //    {
        //      "id": 1,
        //      "text": "TEST FILE NAME",
        //      "file": "path\\to\\your\\pdf\\test.pdf"
        //    }
        //  ]         
        //} 
        if (Services.ConfigurationService.Current.PDFs is JArray)
        {
            foreach (dynamic item in Services.ConfigurationService.Current.PDFs)
            {
                if (item.id.ToString() == id)
                {
                    var targetFile = item.file.ToString().Replace("\\", "/");
                    var targetFileShortName = targetFile.Contains(@"/") ? targetFile.Substring(targetFile.LastIndexOf("/") + 1) : targetFile;

                    var result = new List();
                    var buffer = new byte[1024000];
                    using (var br = new BinaryReader(new FileStream(Server.MapPath(@"~/DataFiles/" + targetFile), FileMode.Open, FileAccess.Read, FileShare.ReadWrite), Encoding.Default))
                    {
                        Response.BufferOutput = false;
                        Response.ContentType = "application/octet-stream";
                        Response.AddHeader("Content-Disposition", "attachment; filename=\"" + System.Web.HttpUtility.UrlEncode(targetFileShortName, Encoding.UTF8) + "\"");
                        Response.AddHeader("Content-Length", br.BaseStream.Length.ToString());

                        var readed = br.Read(buffer, 0, buffer.Length);
                        while (readed > 0)
                        {
                            Response.OutputStream.Write(buffer, 0, (int)readed);
                            Response.Flush();
                            readed = br.Read(buffer, 0, buffer.Length);
                        }
                    }
                    Response.End();
                    return null;
                }
            }
            throw new ArgumentException("file not found.");
        }
        else
        {
            throw new ArgumentException("invalid configuration. check app.config.json file.");
        }
    }
    catch (Exception ex)
    {
        return Content(ex.Message);
    }
}