如何为base64格式PDF的HTML embed元素自定义显示标题？

你遇到的问题根源在于：直接用纯Base64字符串作为embed的src时，浏览器无法从Data URI中获取文件名信息，因此默认显示“base64”。而你尝试的title是给辅助阅读设备用的描述属性，download是a标签的专属属性，embed并不支持通过这两个属性修改显示的文件名，所以加了也没用。下面给你两个可行的解决办法：

方法一：修改Data URI头部添加文件名参数 #

在Base64的Data URI开头加入name=自定义文件名参数，部分现代浏览器（如Chrome）会识别这个参数并将其作为PDF的显示文件名。修改后的embed代码示例：

<embed 
  src="data:application/pdf;name=我的自定义文件.pdf;base64,你的Base64内容" 
  width="100%" 
  height="1000px" 
  type="application/pdf"
>

注意：这个方法的兼容性依赖浏览器，部分老版本浏览器可能不支持name参数。

方法二：用Blob/File生成ObjectURL（兼容性更好） #

把Base64转换为带文件名的File对象，再生成ObjectURL给embed使用，这种方式几乎所有支持PDF预览的浏览器都能识别文件名，是更可靠的方案。示例代码如下：

HTML部分 #

<embed id="pdfEmbed" width="100%" height="1000px" type="application/pdf">

JavaScript部分 #

// 假设你拿到的是去掉Data URI前缀的纯Base64字符串
const base64Content = "你的Base64内容";
// 将Base64转换为二进制数组
const byteStr = atob(base64Content);
const byteArray = new Uint8Array(byteStr.length);
for (let i = 0; i < byteStr.length; i++) {
  byteArray[i] = byteStr.charCodeAt(i);
}
// 创建带自定义文件名的File对象
const pdfFile = new File([byteArray], "我的自定义文件.pdf", { type: "application/pdf" });
// 生成可访问的ObjectURL
const pdfUrl = URL.createObjectURL(pdfFile);
// 给embed设置src
document.getElementById("pdfEmbed").src = pdfUrl;

// 页面卸载时释放URL，避免内存泄漏
window.addEventListener("beforeunload", () => {
  URL.revokeObjectURL(pdfUrl);
});

这个方法不仅能解决预览时的文件名显示问题，后续如果需要添加下载功能，也可以直接用这个File对象配合a标签的download属性实现，实用性更强。

内容的提问来源于stack exchange，提问作者Space