前端在线预览pdf、word、excel方案(写给自己看的)

一、pdf

浏览器是支持直接预览pdf的，但是很多时候我们直接通过打开新窗口或放到iframe中，都会变成下载而不是预览，这可能是因为后端返回的blob type对不上号，只要对返回的blob稍加修改就可以在浏览器进行预览了。

<iframe id="myIframe"></iframe>

// 根据接口获取文件 blob 对象
let res = await fetch(fileUrl)
let data = await res.blob()

// 创建一个新的blob并且设置blob的type
const blob = new Blob([data], { type })

// 生成本地地址
let fileUrl = URL.createObjectURL(blob)

// 渲染到iframe
let iframeDoc = document.getElementById('myIframe')
iframeDoc.src = fileUrl;

二、word

浏览器是不支持直接显示word的，其他方案可以选择用插件，如果插件用不了，或者无法与自己的工程结合，就让后端写个接口，把word转成pdf，然后再用上面的方式进行预览。

三、excel

浏览器是不支持直接显示word的，其他方案可以选择用插件，本次示范的是js-xlsx插件，该插件可以直接读取excel文件返回html,但是不带样式，不过样式可以自己写。最终结果展示的只是普通的表格，无法还原excel原本的样式。

<iframe id="myIframe"></iframe>

// 把文件对象传进来即可
function getExcelData(file) {
    const reader = new FileReader()
    reader.onload = (e) => {
        const data = e.target.result;
        const workbook = XLSX.read(data, {
            type: 'binary'
        })
        // 取第一张表
        const wsname = workbook.SheetNames[0] 
        // 生成json表格内容
        const ws = XLSX.utils.sheet_to_html(workbook.Sheets[wsname]) 

        if (ws) {
            let doc = document.getElementById('myIframe').contentDocument
            doc.write(ws)

            let table = doc.querySelector('table')
            table.border = 1
            // 修改表格样式
            const styleElement = doc.createElement('style');
            styleElement.textContent = `
                /* 在这里写入你的CSS样式 */
                table {
                    border-collapse: collapse;
                    border-color: #ccc;
                    color: #333;
                }
                td {padding: 8px 12px}
                tr {background: #f3f3f3}
            `;
            doc.head.appendChild(styleElement);
        }
    }

    reader.readAsBinaryString(file)
}