.net core使用pdf.js预览PDF文档

最新推荐文章于 2024-07-29 08:00:00 发布

默默8413

最新推荐文章于 2024-07-29 08:00:00 发布

阅读量1.4k

点赞数 1

分类专栏：开发文章标签： javascript .netcore 前端

本文链接：https://blog.csdn.net/mm8413/article/details/126715762

版权

开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何在 .NET Core MVC 项目中集成 pdf.js 库，实现前端预览 PDF 文件的功能。通过前端 JavaScript 代码和后端 C# 代码的结合，实现了从服务器获取 PDF 数据，然后在浏览器中进行展示、缩放等操作。同时，提供了加载、放大和缩小页面的按钮，增强了用户体验。

摘要由CSDN通过智能技术生成

在.net core MVC项目中使用pdf.js预览PDF文档。

前端代码：

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>'Hello, world!' example</title>
    <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <!--引用JS-->
    <script src="~/lib/pdfjs/pdf.js"></script>
    <style>
        <!--引用满屏样式-->
        html {
            overflow-y: scroll;
            font-family: helvetica, arial, sans-serif;
        }
                body {
          margin: 0;
          padding: 0;
        }
        .home_wrap {
            width: 100%;
            height: 100%;
        }

        .well {
            display: block;
            background-color: #f2f2f2;
            border: 1px solid #ccc;
            margin: 5px;
            width: calc(100% - 12px);
            height: calc(100vh - 73px);
            overflow: auto;
        }

        .banner {
            overflow: auto;
            text-align: center;
            /* background-color: #12b6ff; */
            color: #000;
            line-height:60px;
        }
    </style>
</head>
<body>
    <div class="home_wrap">
        <div class="banner">
            <div>
                <button id="load" onclick="load(0)" class="btn btn-primary">加载</button>
                <button id="d" onclick="scaleD()" class="btn btn-primary">放大</button>
                <button id="x" onclick="scaleX()" class="btn btn-primary">缩小</button>
            </div>
        </div>
        <div>
            <div class="well">
                <div class="home_wrap">
                    <!--定义预览的div-->
                    <div id="aa" style="margin:0px auto;">
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script id="script">
        //定义变量
        var pdfDoc;
        var pageTotal;
        var scale = 0.8;
        var currentPage = 1;
        var pageRendering = false;
        var pageNumPending = null;
        var ctx;
        var canvasj;
        var pdf_scale = 1;
        var pdfData;

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

        //加载后端
        function load(flag) {
            if (pdfData != undefined && flag == 1) {
                var loadingTask = pdfjsLib.getDocument({ data: pdfData });
                loadingTask.promise.then(function (pdfDoc_) {
                    pdfDoc = pdfDoc_;
                    pageTotal = pdfDoc.numPages;
                    for (i = 1; i <= pageTotal; i++) {
                        var c = "<canvas id='the_canvas" + i + "' ></canvas>";
                        $("#aa").append(c);
                        renderPage(i);
                    }
                });
            }
            else {
                $.post(
                    '@Url.Content("~/Pdf/FileBlob")',
                    function (data) {
                        var d = JSON.parse(data);
                        if (d.code == "-1") {
                            alert(d.msg);
                        } else {
                            pdfData = atob(d.msg);
                            var loadingTask = pdfjsLib.getDocument({ data: pdfData });
                            loadingTask.promise.then(function (pdfDoc_) {
                                pdfDoc = pdfDoc_;
                                pageTotal = pdfDoc.numPages;
                                for (i = 1; i <= pageTotal; i++) {
                                    var c = "<canvas id='the_canvas" + i + "' ></canvas>";
                                    $("#aa").append(c);
                                    renderPage(i);
                                }
                            });
                        }
                    });
            }
        }

        function scaleX() {
            //缩小
            var min = 1.0;
            if (pdf_scale <= min) {
                return;
            }
            pdf_scale = pdf_scale - 0.1;
            load(1);
        }

        function scaleD() {
            //放大
            var max = 0;
            if (window.screen.width > 1440) {
                max = 2.4;
            } else {
                max = 2.2;
            }
            if (pdf_scale >= max) {
                return;
            }
            pdf_scale = pdf_scale + 0.1;
            load(1);
        }

        //分页
        function renderPage(num) {
            currentPage = num;
            //渲染pdf页
            console.log("渲染pdf页");
            pdfDoc.getPage(num).then(function (page) {
                canvas = document.getElementById("the_canvas" + num);
                // const canvas = document.getElementById("the_canvas");
                ctx = canvas.getContext("2d");
                var dpr = window.devicePixelRatio || 1;
                var bsr =
                    ctx.webkitBackingStorePixelRatio ||
                    ctx.mozBackingStorePixelRatio ||
                    ctx.msBackingStorePixelRatio ||
                    ctx.oBackingStorePixelRatio ||
                    ctx.backingStorePixelRatio ||
                    1;
                var ratio = dpr / bsr;
                var viewport = page.getViewport({ scale: pdf_scale });
                canvas.width = viewport.width * ratio;
                canvas.height = viewport.height * ratio;
                canvas.style.width = viewport.width + "px";
                var pdf_div_width = viewport.width + "px";
                $("#aa").css("width", pdf_div_width)
                canvas.style.height = viewport.height + "px";
                ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
                var renderContext = {
                    canvasContext: ctx,
                    viewport: viewport,
                };
                page.render(renderContext);
            });

        }
    </script>

</body>
</html>

后端代码：

using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;

namespace WebApplication10.Controllers
{
    public class PdfController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public IActionResult FileBlob()
        {
            try
            {
                byte[] bs;
                //将文件转换为二进制，再转换为base64返回前端
                FileStream fs = new FileStream(@"D:\VSProjects\WebApplication10\wwwroot\atts\a.pdf", FileMode.Open);
                try
                {
                    bs = new byte[fs.Length];
                    fs.Read(bs, 0, (int)fs.Length);
                    string ss = Convert.ToBase64String(bs);
                    return Content(JsonConvert.SerializeObject(new { code = 0, msg = ss }));
                }
                finally
                {
                    fs.Close();
                }


            }
            catch (Exception e)
            {
                return Content(JsonConvert.SerializeObject(new { code = -1, msg = e.Message }));
            }
        }
    }
}

结果：