前端选择pdf文件，打开新页面预览

强身健体，清神醒脑

已于 2024-02-23 14:00:50 修改

阅读量829

点赞数

分类专栏： blob 文章标签： html html5

于 2021-07-09 17:50:21 首次发布

本文链接：https://blog.csdn.net/weixin_43660626/article/details/118611939

版权

blob 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

<!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>

强身健体，清神醒脑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端选择pdf文件，打开新页面预览

<!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&lt
复制链接

扫一扫