Question

关于堆栈和数据：

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

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

此数据通过C＃REST WebAPI返回，返回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 DOES 显示，但每次都会有所不同。它可能是颠倒的，文本的一部分是向后的，或者某些文本被翻转显示两次（就像PDF被翻转一样）。

Answer 1

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

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
};

在HTML

1 个答案: