平时预览pdf都是后台直接返回url链接,直接预览或者下载,这次因为业务需求,后台返回的是base64的数据,所以需要先将base64转为pdf的blob文件,并获取到链接。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>base64转pdf</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<style>
iframe{
height:800px;
width:800px
}
</style>
<script>
let data="这里是去头的base64编码"
function base64ToBlob(code) {
//Base64一行不能超过76字符,超过则添加回车换行符。因此需要把base64字段中的换行符,回车符给去掉,有时候因为存在需要把加号空格之类的换回来,取决于base64存取时的规则。
code = code.replace(/[\n\r]/g, '');
var raw = window.atob(code);
let rawLength = raw.length;
//转换成pdf.js能直接解析的Uint8Array类型
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: 'application/pdf'});//转成pdf类型
}
$(function(){
//获取到了blob对象
let blob=base64ToBlob(data);
//获取当前url,直接放到iframe就能用,下载同理
let blobURL = window.URL.createObjectURL(blob);
$('iframe')[0].src=blobURL;
})
</script>
</head>
<body>
<iframe></iframe>
</body>
</html>