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

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;
    }

后记

网上搜索前端预览 PDF 的实现，基本都是说用 iframe、embed、object，或者用 pdf.js 等三方库，比如 html 中前端页面预览 pdf 文档的 6 种方法

本人一开始也是用 iframe，刷刷刷就写完了，很快啊，结果测试人员测试时发现，你这预览有问题啊，大于 2MB 的 PDF 文件就预览不了了
（New：在另一个工程使用iframe预览时没有2MB的限制，未找到具体原因，因此大家按适合自己业务的来就好）

经过前端大神指点，找到了 fetch 这种方式，100MB 文件也不在话下，当然页面会卡一会，所以最好加个 Loading 提示用户

另外，这里都是通过打开新窗口实现预览功能，可能某些电脑的浏览器会拦截弹出窗口，可以提前提示用户允许打开