<!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>Document</title>
</head>
<body>
<input type="file" id="file">
<script>
file.onchange=function(e){
let file = e.target.files[0]
let fileReader = new FileReader();
fileReader.onload=function(e){
let base64PDF = e.target.result;
let objbuilder = `<object width="100%" height="100%" data=""
type="application/pdf" class="internal" id='internal'>
</object>`;
let win = window.open("","_blank");
win.document.title = "My Title";
win.document.write(`<html>
<style>
*{
padding:0;
margin:0;
}
</style>
<body>`);
win.document.write(objbuilder);
win.document.write(`</body><script>
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(',');
var _arr = arr[1].substring(0,arr[1].length-2);
var mime = arr[0].match(/:(.*?);/)[1],
bstr =atob(_arr),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
}
let base64PDF = '${base64PDF}'
let url = window.URL.createObjectURL(dataURLtoBlob(base64PDF));
let internal = document.querySelector('#internal');
internal.setAttribute('data',url)
</scr${'ipt'}></html>`);
}
fileReader.readAsDataURL(file)
}
</script>
</body>
</html>
前端选择pdf文件,打开新页面预览
于 2021-07-09 17:50:21 首次发布
这个示例展示了如何通过HTML和JavaScript利用FileReader接口读取上传的PDF文件,并将其转换为Base64编码,然后在新窗口中以对象标签的方式展示。该过程包括读取文件、转换数据URL、创建Blob对象以及设置内部对象的数据属性。
摘要由CSDN通过智能技术生成