如何使用iframe？c# mvc和javascript显示超过2mb的pdf

gmol1639 于 2023-03-16 发布在 Java

关注(0)|答案(1)|浏览(223)

我想在网上显示我的pdf文件。通常它小于5mb。

<div>
        <iframe src="data:application/pdf;base64, @base64String" style="width:100%; height:500px" />
    </div>

你可以看到这对于小的pdf文件非常有效，通常小于2mb。

// this is what I did on my c# mvc controller.
var fData = Convert.ToBase64String(System.IO.File.ReadAllBytes(fname));

ViewData["base64String"] = fData ;

我的方法是创建一个blob类型的数据并将其发送到视图。然后我可以使用URL创建url。createObjectURL（blob）并尝试通过iFrame显示它。下面的代码是我的方法，但它不起作用。
一个二个一个一个
我尝试了几种方法来编码来自控制器的数据

var temp = Convert.ToBase64String(fileByte);
            var res = Convert.ToBase64String(Encoding.UTF8.GetBytes(temp));
            var pdf = string.Format("data:application/pdf;base64,{0}", fileContents[0]);
            ViewData["File"] = File(fileByte, "application/pdf");
            ViewData["Byte"] = fileByte;
            ViewData["Encoded"] = res;
            ViewData["Content"] = fileContents;
            ViewData["pdf"] = pdf;

我不能让它显示小于2MB的PDF文件，我不知道我哪里做错了。
我也在javascript中尝试过这个，它会在html上返回一个错误，说“encStr”没有正确编码。

const byteCharacters = atob('@encStr');
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);

我想解决它，使它工作。我不想使用外部包。如果这是唯一的方法，那么我会使用它。

JavaScript

来源：https://stackoverflow.com/questions/75749722/how-to-display-pdf-more-than-2mb-by-using-iframe-c-sharp-mvc-and-javascript

1条答案

按热度按时间

vq8itlhq1#

我建议您稍微简化一下代码，并遵循以下步骤：
1.修改C#控制器以将字节数组直接传递给视图。
1.在.cshtml文件中，将字节数组转换为base64字符串。
1.创建一个blob对象，并将iframe源设置为从blob创建的对象URL
修改C#控制器：

byte[] fileBytes = System.IO.File.ReadAllBytes(filename);
ViewData["FileBytes"] = fileBytes;

在.cshtml文件中：

@{
    byte[] fileBytes = ViewData["FileBytes"] as byte[];
    string base64String = Convert.ToBase64String(fileBytes);
}

创建blob并设置iframe源代码：

<iframe id="viewer" style="width:100%; height:500px"></iframe>

<script>
    const base64String = '@Html.Raw(base64String)';
    const byteArray = Uint8Array.from(atob(base64String), c => c.charCodeAt(0));
    const blob = new Blob([byteArray], { type: 'application/pdf' });

    const viewer = document.getElementById('viewer');
    const objectUrl = URL.createObjectURL(blob);

    viewer.setAttribute('src', objectUrl);
    viewer.onload = () => URL.revokeObjectURL(objectUrl);
</script>

这应该适用于在iframe中显示大于2MB的PDF文件。请确保从控制器和.cshtml文件中删除任何不必要的代码。这种方法避免了双重编码，这可能会在原始实现中导致问题。

赞(0）回复(0）举报 2023-03-16

我来回答

如何使用iframe？c# mvc和javascript显示超过2mb的pdf

1条答案

相关问题

热门标签

最新问答