【Html】通过浏览器让base64字符串转成pdf或图片

博客主要介绍了信息技术中base64转图片和转pdf的相关内容。在base64转图片方面,列举了不同图片格式(如gif、png、jpeg、icon)的data属性;在base64转pdf时,提到若需设置大小,可额外将height和width设为100%。

通过浏览器让base64字符串转成pdf或图片

base64转图片

<img src="data:image/png;base64,你的图片的base64写在这里" alt="" />

data的属性还有以下这些:
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

base64转pdf

<iframe src="data:application/pdf;base64,你的pdf的base64写在这里"></iframe>

如果需要设置大小,可以额外自行增加height width为100%

在 SAP UI5 中实现将 Base64 字符串换为 PDF 文件并触发下载,可以通过以下步骤完成。首先,需要将 Base64 字符串换为 `Blob` 对象,然后使用 `URL.createObjectURL` 创建一个临时的下载链接,并通过模拟点击触发文件下载。 ### 创建 Blob 对象并下载 Base64 数据通常以 `data:application/pdf;base64,` 开头,因此在处理时需要去除该前缀,仅保留 Base64 编码部分。随后可以使用 `atob()` 函数将其解码为二进制数据,并通过 `Uint8Array` 构建 `Blob` 对象。 ```javascript function base64ToPdfAndDownload(base64String, filename) { // 去除Base64前缀并解码 const byteCharacters = atob(base64String.split(',')[1] || base64String); 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' }); // 创建下载链接并触发下载 const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = filename || 'document.pdf'; link.click(); URL.revokeObjectURL(link.href); } ``` ### 在 SAP UI5 中调用 可以在 SAP UI5 的控制器中调用该函数,例如绑定到按钮的 `press` 事件: ```xml <Button text="Download PDF" press="onDownloadPdf"/> ``` ```javascript onDownloadPdf: function () { const base64PDF = "JVBERi0xLjQKJeLjz9MKMyAwIG9iago8PC9MZW5ndGggND..." // 示例Base64 PDF数据 base64ToPdfAndDownload(base64PDF, 'report.pdf'); } ``` 该方法兼容主流浏览器,并可在 SAP UI5 应用中稳定运行。需要注意的是,若 Base64 数据包含非 PDF 类型的内容,可能导致生成的文件无法正常打开。因此建议在换前确保数据的正确性[^1]。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值