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

Question

About the stack and data:

---

I've been working on displaying a PDF in our AngularJS Kiosk application since late yesterday evening, but have gotten stuck on multiple occasions.

Currently I've got a table in our SQL Server database that holds some data, one of the fields being a varbinary(max) representation of a PDF.

This data is returned through a C# REST WebAPI which returns JSON objects (where obviously the PDF varbinary is a byte[] .

Each PDF is assigned to a specific role and place of work. As it is right now this is all bundled up in the returned JSON object .

---

The Problem:

This current implmentation has worked absolutely fine for displaying images, but now that I'm working with a PDF I seem to:

a.) Either get some missrepresentation of the data; the pdf might be upside down, some text might be backwards or parts of the pdf might follow as upside down. (When using pdf.js)

b.) The PDF doesn't display because there is no data in it or the worker gets destroyed (angular-pdf) .

I'm now back to using pdf.js, so scenario a.) keeps occurring.

---

Code:

This is how I pull out the data using 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;
                        }
                    });
                }); 
            });
        });
    });

Checking out the Pdf of the returned object it seems to be of type string and seems to have a decoded binary value as the Pdf value in the database is encoded.

This is how the data is returned by my 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);
}

And finally this is how I am displaying it:

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

---

To re-iterate:

The PDF DOES display, but it comes out different every time. It could be that it's upside down, part of text is backwards or that some of the text is displayed twice (like the PDF has been flipped) upside-down.

Answer 1

You can try to delete the canvas before each render. It's ugly, but it does fix the rendering problem. Hopefully future versions of PDFJS will work without this 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
};