在 HTML 中显示 pdf 时的奇怪行为

Question

关于堆栈和数据：

---

从昨天晚上开始，我一直致力于在我们的 AngularJS Kiosk 应用程序中显示 PDF，但多次卡住了。

目前，我的 SQL Server 数据库中有一个表，其中包含一些数据，其中一个字段是 PDF 的varbinary(max) 表示。

此数据通过 C# REST WebAPI 返回，该 API 返回 JSON 对象（显然 PDF varbinary 是 byte[]。

每个 PDF 都被分配到一个特定的角色和工作地点。就像现在一样，这一切都捆绑在返回的 JSON 对象中。

---

问题：

当前的实现在显示图像方面工作得非常好，但现在我正在使用 PDF，我似乎：

a.) 要么得到一些错误表示的数据；要么pdf 可能会颠倒，某些文本可能会倒置，或者 pdf 的某些部分可能会颠倒。 （使用 pdf.js 时）

b.) PDF 不显示，因为其中没有数据或工作人员被破坏 (angular-pdf)。

我现在又开始使用 pdf.js，所以场景 a.) 不断发生。

---

代码：

这就是我使用 Angular 提取数据的方式：

$http.post("http://some-example.com/api/PDF/Get", JSON.stringify(vm.content))
    .then(function (response) {
        //success

        vm.data = response.data;
        $sce.trustAsResourceUrl(vm.data[0].Pdf);
    },
    function (error) { 

    })
    .finally(function () {
        let pdf = atob(vm.data[0].Pdf);
        let loadingTask = PDFJS.getDocument({ data: pdf }); 

        loadingTask.promise.then(function (pdf) { 

            let pageNumber = 1;
            pdf.getPage(pageNumber).then(function (page) {
                let scale = 1;
                let viewport = page.getViewport(scale);

                let canvas = document.getElementById('test-canvas');
                let context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                let renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                let renderTask = page.render(renderContext);
                renderTask.then(function () { 
                    // Wait for rendering to finish
                    renderTask.promise.then(function () {
                        pageRendering = false;
                        if (pageNumPending !== null) {
                            // New page rendering is pending
                            renderPage(pageNumPending);
                            pageNumPending = null;
                        }
                    });
                }); 
            });
        });
    });

检查返回对象的Pdf，它似乎是string 类型，并且似乎具有解码的二进制值，因为数据库中的Pdf 值已编码。

这是我的 REST API (C#) 返回数据的方式：

[HttpPost]
public HttpResponseMessage Get(int get_id = 0)
{
    HttpContent req = Request.Content;
    int val = 0;
    string jsonContent = req.ReadAsStringAsync().Result;
    JObject jobobj = JObject.Parse(jsonContent);
    string where = null;
    List<test_pdf_table> list = new List<test_pdf_table>();
    DataSet ds = null;

    try
    {
        where = (jobobj["where"] == null) ? null : (string)jobobj["where"];
        string strcon = ConfigurationManager.ConnectionStrings[(string)jobobj["strcon"]].ConnectionString;
        ds =  dc.FETCHtest_pdf_table((where == null) ? "Where ID = " + get_id : where, (strcon == null) ? conStr : strcon, "REST");
    }

    catch (Exception e)
    {
        return Request.CreateResponse(HttpStatusCode.InternalServerError, e.ToString());
    }

    if (where == null) 
    {
        ds = dc.FETCHtest_pdf_table("WHERE ID = " + get_id, conStr, "REST");
    } 
    else 
    {
        ds = dc.FETCHtest_pdf_table(where, conStr, "");
    }

    foreach (DataTable table in ds.Tables)
    {

        foreach (DataRow row in table.Rows)
        {
            int? id = row["ID"] as int?;
            int? userid = row["UserID"] as int?;
            int? worksiteid = row["WorksiteID"] as int?;
            Byte[] pdf = row["Pdf"] as Byte[];
            String path = row["Path"] as String;

        list.Add(new test_pdf_table
                {
                    ID = id,
                    UserID = userid,
                    WorksiteID = worksiteid,
                    Pdf = pdf,
                    Path = path
            });
        }
    } 
    return Request.CreateResponse(HttpStatusCode.OK, list);
}

最后这就是我展示它的方式：

<canvas id="test-canvas"></canvas>

---

重申：

PDF 确实显示，但每次显示的结果都不一样。可能是上下颠倒、部分文本向后或某些文本显示两次（如 PDF 已翻转）上下颠倒。

Answer 1

您可以尝试在每次渲染之前删除画布。它很难看，但它确实解决了渲染问题。希望未来版本的 PDFJS 能够在没有这种 hack 的情况下工作：

let canvas = document.getElementById('test-canvas'),
parent = canvas.parentNode,
context;

parent.removeChild(canvas);
canvas = document.createElement('canvas');
canvas.id = 'test-canvas';
parent.insertBefore(canvas, parent.childNodes[0]);
context = canvas.getContext('2d');

canvas.height = viewport.height;
canvas.width = viewport.width;

let renderContext = {
    canvasContext: context,
    viewport: viewport
};