如何在 Vue 2 组件中正确加载 base64 编码的 PDF 到 iframe 或 embed？
如何在vue2中使用iframe和embed均显示base64转化的pdf文件？
由于之前没做过，先做了个小测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display PDF</title>
</head>
<body>
<h1>PDF File Display</h1>
<embed id="pdfViewer" width="600" height="500" type="application/pdf">
<script>
// Assuming this is your Base64 encoded string
const base64String = "data:application/pdf;base64XXXX"
// Create a Blob object
const byteCharacters = atob(base64String.split(',')[1]);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'application/pdf' });
// Create a URL object
const url = URL.createObjectURL(blob);
// Set the URL as the source of the embed element
document.getElementById('pdfViewer').src = url;
</script>
</body>
</html>以上代码有效
再放到vue中却失效了，并且没有报错，且渲染的iframe和embed内的src均可以单独打开(以下代码位于mounted)
const base64String = "data:application/pdf;base64,XXXXXX"
const byteCharacters = atob(base64String.split(',')[1]);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'application/pdf' });
this.url = URL.createObjectURL(blob);
document.getElementById('pdfViewer').src = this.url;
也尝试过将iframe的地址改为百度，可以显示
请问有人知道这是什么原因吗？
共有1个答案
在 Vue 2 中，你可以通过使用 iframe 或 embed 标签来显示从 Base64 转换而来的 PDF 文件。以下是具体的实现方法：
1. 使用 iframe 显示 Base64 PDF 文件
你可以将 Base64 字符串直接嵌入到 iframe 的 src 属性中。需要注意的是，Base64 字符串应当包含正确的前缀（如 data:application/pdf;base64,），以便浏览器正确解析。
<template>
<div>
<iframe :src="pdfData" width="100%" height="600px"></iframe>
</div>
</template>
<script>
export default {
data() {
return {
// 示例Base64字符串
base64String: 'JVBERi0xLjcKCjEgMCBvYmoKPDwvVHlwZSAvQ2F0YW... (Base64 Data)',
};
},
computed: {
pdfData() {
return `data:application/pdf;base64,${this.base64String}`;
}
}
};
</script>2. 使用 embed 显示 Base64 PDF 文件
与 iframe 类似，embed 标签也可以用来嵌入 PDF 文件，同样使用 Base64 字符串作为 src。
<template>
<div>
<embed :src="pdfData" width="100%" height="600px" type="application/pdf" />
</div>
</template>
<script>
export default {
data() {
return {
// 示例Base64字符串
base64String: 'JVBERi0xLjcKCjEgMCBvYmoKPDwvVHlwZSAvQ2F0YW... (Base64 Data)',
};
},
computed: {
pdfData() {
return `data:application/pdf;base64,${this.base64String}`;
}
}
};
</script>3. 注意事项
- Base64 字符串长度：Base64 编码的 PDF 文件可能非常大，这会导致页面加载较慢或者浏览器无法解析整个字符串。确保你的 Base64 字符串不被截断。
- 浏览器支持：大多数现代浏览器都支持这种嵌入方式，但某些旧版浏览器可能会有兼容性问题。
- 安全性：在处理 Base64 数据时，尤其是从外部来源获取的数据，确保它们是安全的，并且不会引发安全问题（如跨站脚本攻击）。
以上方法可以帮助你在 Vue 2 中使用 iframe 或 embed 标签来显示 Base64 转化的 PDF 文件。
-
问题内容： 好的，所以我一直在尝试使用以下代码加载BufferedImage： 但是，这在运行时给了我一个类型转换错误，那么如何正确加载BufferedImage？ 问题答案： 使用来代替：
-
我有一个来自服务器的bas64编码图像，我想通过JavaScript强制下载。有可能吗？
-
我让转换器在这里工作
-
问题内容： node.js是否具有内置的base64编码？ 我之所以这样问，是因为from 只能输出十六进制，二进制或ascii数据。例如： 根据文档，可以输出base64编码的数据。但是，不支持base64。我尝试过，它会破裂。 如果我这样做： 那我应该用什么解密呢？十六进制还是base64？ 因此，我正在寻找一个函数来对加密的十六进制输出进行base64编码。 问题答案： 缓冲区可用于获取字符
-
任何帮助都将不胜感激。