首先,去官网下载最新版的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渲染速度。
<script src="~/Content/lib/pdfjs/lib/pdf.js" type="text/javascript" charset="utf-8"></script>
实际项目如果需要使用
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<byte>();
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);
}
}