vue如何将base64流数据转成pdf文件并在新页面打开
作者：小薯片子
这篇文章主要介绍了vue如何将base64流数据转成pdf文件并在新页面打开问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
将base64流数据转成pdf文件并在新页面打开
参考了很多写法，最终这种方法可以实现。
具体实现方法：
将下面这两个方法写在vue中，直接调用viewPdf函数，传参为要转换的base64流数据
viewPdf(content) {
if (!content) {
this.$message.error('暂无意见')
return
}
const blob = this.base64ToBlob(content)
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob)
} else {
const fileURL = URL.createObjectURL(blob)
window.open(fileURL)
}
},
base64ToBlob(code) {
code = code.replace(/[\n\r]/g, '')
// atob() 方法用于解码使用 base-64 编码的字符串。
const raw = window.atob(code)
const rawLength = raw.length
const uInt8Array = new Uint8Array(rawLength)
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i)
}
return new Blob([uInt8Array], { type: 'application/pdf' })
},base64转二进制文件流并显示
1.判断base类型 这里提供图片和pdf
function base64FileHeaderMapper(fileBase64) {
let fileHeader = new Map();
//获取不同文件的文件头前3个字作为判断依据
fileHeader.set("/9j", "jpeg");
fileHeader.set("iVB", "png");
// fileHeader.set("Qk0", "BMP")
// fileHeader.set("SUk", "TIFF")
fileHeader.set("JVB", "pdf");
// fileHeader.set("UEs", "OFD")
let res = "";
//遍历map中所提及的文件头特征
fileHeader.forEach((v, k) => {//IE不支持箭头函数 兼容IE需要改写
if (k == fileBase64.substr(0, 3)) {
res = v;
}
});
//如果不在map中返回unknown file
if (res == "") {
res = "unknown file";
}
//否则返回map中的value值
return res;
}
2.base转二进制文件流
function base64ToBlob(code, type) {
code = code.replace(/[\n\r]/g, "");
let raw = window.atob(code);
let rawLength = raw.length;
let uint8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; i++) {
uint8Array[i] = raw.charCodeAt(i);
}
if ("pdf" === type) {
return new Blob([uint8Array], { type: "application/pdf" });
} else {
return new Blob([uint8Array], { type: "image/jpeg" });
}
}
3.填坑
base64 字符串中不含 data:application/pdf;base64,
否则 window.atob(code);解码报错，不解码也无法加载pdf
4.完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>base转二进制</title>
</head>
<body>
<div style="width: 100vw;height: 100vh">
<iframe width="100%" height="100%" src="" frameborder="0" id="iframe"></iframe>
</div>
<script>
let iframe = document.getElementById("iframe")
let base = "JVBERi0xLjQKJdPr6eEKMSAwIG9iago8PC9DcmVhdG9yIChNb3ppbGxhLzUuMC..."; //base64不完整
let s = base64FileHeaderMapper(base);
let blob = base64ToBlob(base, s);
iframe.src = URL.createObjectURL(blob);
function base64FileHeaderMapper(fileBase64) {
let fileHeader = new Map();
//获取不同文件的文件头前3个字作为判断依据
fileHeader.set("/9j", "jpeg");
fileHeader.set("iVB", "png");
// fileHeader.set("Qk0", "BMP")
// fileHeader.set("SUk", "TIFF")
fileHeader.set("JVB", "pdf");
// fileHeader.set("UEs", "OFD")
let res = "";
//遍历map中所提及的文件头特征
fileHeader.forEach((v, k) => {//箭头函数IE不支持 兼容IE需改写
if (k == fileBase64.substr(0, 3)) {
res = v;
}
});
//如果不在map中返回unknown file
if (res == "") {
res = "unknown file";
}
//否则返回map中的value值
return res;
}
function base64ToBlob(code, type) {
code = code.replace(/[\n\r]/g, "");
let raw = window.atob(code);
let rawLength = raw.length;
let uint8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; i++) {
uint8Array[i] = raw.charCodeAt(i);
}
if ("pdf" === type) {
return new Blob([uint8Array], {
type: "application/pdf"
});
} else {
return new Blob([uint8Array], {
type: "image/jpeg"
});
}
}
</script>
</body>
</html>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。