需要在单击时将Bytes[]转换为PDF并在侧边显示。

huangapple go评论57阅读模式
英文:

I need to convert Bytes[] to PDF on click and display on the side

问题

我有一个 TreeList,我将其用作第三方的 DevExpress,但我不需要与 DevExpress 相关的任何内容,但是当我单击时会触发一个调用 JavaScript 中函数的事件,该函数在一列中有 PDF 字节。我想知道是否有办法获取这些字节并将其转换为 PDF 并在屏幕右侧显示出来,我不需要下载文件或在另一个选项卡中显示它,只需在右侧显示以预览文档。

我留下了一些图片和当前告诉我字符串太长无法通过浏览器传递的代码,我想知道是否有人做过类似的事情。

JavaScript 函数

    function GetPdf(result) {

        alert(result);
        var x = result;
        $("#DisplayPDF").html(
            $('<iframe>', {
                src: 'data:application/pdf;base64,' + x,
                width: '600px',
                height: "800px"
            })
        );
    }

视图

<div id="DisplayPDF" style="float: right; width: 45%;overflow-y:scroll;height:60vh; margin-top:10px"></div>

我添加了一个关于参数 result 的警报,这是我得到的内容。

英文:

I have a TreeList that I use as a third party DevExpress but I don't need anything related to DevExpress but what when I click there is an event that calls a function in JavaScript that I have PDF bytes in one in the column I would like to know if there is any way to take the bytes and convert it to PDF and show it to the side on the right on the screen, I don't need to download the file or show it on another tab just show it on the right to show a preview of the doc.

I leave some images and my code that currently tells me that the string is too big to pass it through the browser, I wanted to know if someone has done something like this.

需要在单击时将Bytes[]转换为PDF并在侧边显示。
JavaScript Function

    function GetPdf(result) {

        alert(result);
        var x = result;
        $("#DisplayPDF").html(
            $('<iframe>', {
                src: 'data:application/pdf;base64,' + x,
                width: '600px',
                height: "800px"
            })
        );
    }

View

<div id="DisplayPDF" style="float: right; width: 45%;overflow-y:scroll;height:60vh; margin-top:10px"></div>

I added an alert of the parameter result and that is what I'm getting.
需要在单击时将Bytes[]转换为PDF并在侧边显示。

答案1

得分: 1

你只是将 resulttoString 连接到 base64 URL 上,而不是将 result 的 base64 编码值连接到其中。根据警告,我猜想 result 是一个 Uint8Array。在这种情况下,你可以从二进制数据构造一个 Blob,然后从中创建一个 Blob URL。然后使用 Blob URL 来显示 PDF。示例:

const bl = new Blob([result], {
    type: "application/pdf"
});
const url = URL.createObjectURL(bl)
$("#DisplayPDF").html(
    $('<iframe>', {
        src: url,
        width: '600px',
        height: '800px'
    })
);
英文:

You're just concatenating the toString of result to the base64 url, not the base64-encoded value of result. Based on the alert, I'm guessing result is a Uint8Array. In that case, you can constructor a Blob from the binary data, and create a blob URL from it. Then use the blob url to display the pdf. Example:

const bl = new Blob([result], {
    type: &quot;application/pdf&quot;
});
const url = URL.createObjectURL(bl)
$(&quot;#DisplayPDF&quot;).html(
    $(&#39;&lt;iframe&gt;&#39;, {
        src: url,
        width: &#39;600px&#39;,
        height: &quot;800px&quot;
    })
);

huangapple
  • 本文由 发表于 2023年6月6日 07:44:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/76410614.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定