前端打开新窗口预览 PDF 和图片

屠龍之技

已于 2023-03-16 20:03:44 修改

阅读量2.1k

点赞数

文章标签：前端

于 2021-11-30 17:51:13 首次发布

本文链接：https://blog.youkuaiyun.com/suwk1009/article/details/121638875

版权

本文介绍了如何使用fetch和新窗口打开方式实现大文件，尤其是PDF和图片的前端预览，避免了iframe在处理大文件时可能出现的问题。通过将文件转换为base64格式，然后利用fetch读取blob数据，可以轻松预览100MB以上的文件，但可能会导致短暂的页面卡顿，建议添加加载提示。同时，预览方式可能被浏览器拦截，需提醒用户允许弹窗。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Talk is cheap, show me the code

前提

Chrome系浏览器
文件需转为 base64 格式，可以使用 FileReader 的 readAsDataURL() 方法，这里不细述

预览 PDF

    fetch(base64str)
        .then((res) => res.blob())
        .then((blob) => {
            const blobURL = URL.createObjectURL(blob);
            window.open(blobURL);
        });

预览图片

    const element = new Image();
    element.src = base64str;
    const newWin = window.open("", "_blank");
    if (newWin) {
        newWin.document.write(element.outerHTML);
        newWin.document.title = title;
    }