React blob格式在线预览（支持图片、视频、pdf、doc、excel）

已于 2024-10-12 18:44:20 修改
阅读量1k 收藏 5
点赞数 8
文章标签： react.js pdf 前端
于 2024-10-12 18:41:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luback/article/details/142883323
版权

写了个弹窗，传请求参数，在里面请求后端数据，数据流为blob格式，通过各种解析渲染，展示相应数据预览。

相关组件安装

npm install @js-preview/excel --save // 预览excel
npm install docx-preview --save  // 预览doc

创建组件

在components文件下创建PreviewFile文件再里面创建index.tsx和index.css(主要是对excel文件样式zu)

index.css样式文件

.freviewFile .vue-office-excel{
    min-height: 700px;
    width: 100%;
    min-width: 700px;
    overflow-x: hidden;
}
.freviewFile  .x-spreadsheet-toolbar{
    width: 100%;
    overflow-x: auto;
}

 index.tsx相关

1. 引入

import { ModalForm } from "@ant-design/pro-components";
import React, { useEffect, useState } from "react";
import { getToken } from "@/utils";
import { downloadFile } from "@/services/ant-design-pro/project";
import Axios from "axios";
import { message, Spin } from 'antd';
import jsPreviewExcel from '@js-preview/excel';
import '@js-preview/excel/lib/index.css';
import './index.css';

2. 组件传参

code是向后端的传参，关闭弹窗引发的函数

code: string;
onClose(): void;

3. 组件内部参数

 const fileTypeMap = {
        "xls": "application/vnd.ms-excel",
        "xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        "doc": "application/msword",
        "docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        "pdf": "application/pdf",
        "ppt": "application/pdf",
        "pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
        "png": "image/png",
        "gif": "image/gif",
        "jpeg": "image/jpeg",
        "jpg": "image/jpeg",
        "txt": "text/plain",
    }
    const imgType = ['bmp', 'jpg', 'jpeg', 'png', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd', 'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'WMF', 'webp', 'avif', 'apng'];
    const videoType = ['wmv', 'asf', 'asx', 'rm', 'rmvb', 'mp4', '3gp', 'mov', 'm4v', 'avi', 'dat', 'mkv', 'flv', 'vob'];
    const token = getToken(); // 用于axios请求，header中传入token
    const [loading, setLoading] = useState(false); // 加载效果
    const [modalVisit, setModalVisit] = useState(false); // 控制弹窗显隐
    const [fileName, setFileName] = useState(''); //文件名称
    const [blobUrl, setBlobUrl] = React.useState(''); //文件流地址

4. 获取文件名函数

  const getFileName = (code: string) => {
        const lastSlashIndex = code.lastIndexOf('/');
        const fileName = code.substring(lastSlashIndex + 1);
        return fileName;
    }

5. 获取文件类型

 const getFileType = (name: string) => {
        if (name) {
            if (name.lastIndexOf(".") > -1) {
                return name.slice(name.lastIndexOf(".") + 1);
            } else {
                return false
            }
        }
    }

6. 重置组件数据函数

  const onClear = () => {
        blobUrl && window.URL.revokeObjectURL(blobUrl);
        setBlobUrl('');
        setFileName('');
        const freviewFileDom = document.getElementById('freviewFile')
        while (freviewFileDom?.firstChild) {
            freviewFileDom.removeChild(freviewFileDom.firstChild);
        }
    }

7.请求后端数据，解析数据，再创建相应DOM渲染在页面（!!!!）

 const getFile = (code: string) => {
        setLoading(true);
        const fileName = getFileName(code);
        setFileName(fileName);
        const fileType = getFileType(code);
        if (!fileType) {
            return
        }

        Axios({
            url: downloadFile, // 后端请求接口
            method: "GET",
            responseType: 'blob',
            headers: {
                "Content-Type": " application/json;charset=UTF-8",
                "cattoken": token
            },
            params: { code: code }
        }).then(res => {
            const blob = new Blob([res.data])
            let reader = new FileReader();
            if (fileType === 'xls' || fileType === 'xlsx') {
                reader.readAsArrayBuffer(blob);
                reader.onload = async (e: any) => {
                    const box = document.createElement('div');
                    box.style.width = '94%';
                    box.style.minHeight = '700px';
                    box.style.marginLeft = '3%';
                    const myExcelPreviewer = jsPreviewExcel.init(box)
                    myExcelPreviewer
                        .preview(e.target.result)
                        .then(() => {
                            console.info('预览完成')
                            setLoading(false)
                        })
                        .catch((e) => {
                            console.info('预览失败', e)
                            setLoading(false)
                        })
                    const freviewFileDom = document.getElementById('freviewFile');
                    while (freviewFileDom?.firstChild) {
                        freviewFileDom.removeChild(freviewFileDom.firstChild);
                    }
                    freviewFileDom?.appendChild(box);
                }
            } else {
                reader.readAsText(blob);
                reader.onload = async (e: any) => {
                    if (e.target.result.indexOf('"statusCode"') >= 0) {
                        message.error(JSON.parse(e.target.result).message)
                    } else {
                        if (imgType.includes(fileType)) {
                            // 图片类预览
                            const blobUrl = URL.createObjectURL(blob);
                            var img = document.createElement('img');
                            img.onload = function () {
                                // 释放创建的URL对象
                                window.URL.revokeObjectURL(blobUrl);
                                setLoading(false);
                            };
                            img.src = blobUrl;
                            img.style.width = 'auto';
                            img.style.height = '300px';
                            const freviewFileDom = document.getElementById('freviewFile')
                            while (freviewFileDom?.firstChild) {
                                freviewFileDom.removeChild(freviewFileDom.firstChild);
                            }
                            freviewFileDom?.appendChild(img);
                        } else if (videoType.includes(fileType)) {
                            const blobUrl = URL.createObjectURL(blob);
                            // console.log('触发', videoType.includes(fileType), fileType, blobUrl)
                            // 创建video元素
                            const video = document.createElement('video');
                            video.controls = true;
                            video.style.width = '100%'; // 设置视频宽度为容器宽度
                            video.style.maxHeight = '100%'; // 设置视频最大高度为容器高度
                            // 当视频加载完成后释放URL对象
                            video.onended = function () {
                                URL.revokeObjectURL(blobUrl);
                            };
                            // 设置视频源
                            video.src = blobUrl;
                            setLoading(false)
                            // 获取预览容器元素
                            const freviewFileDom = document.getElementById('freviewFile')
                            while (freviewFileDom?.firstChild) {
                                freviewFileDom.removeChild(freviewFileDom.firstChild);
                            }
                            freviewFileDom?.appendChild(video);

                            // 将video元素添加到预览容器中
                            freviewFileDom?.appendChild(video);
                        } else if (fileType === 'pdf' || fileType === 'txt') {
                            const blob = new Blob([res.data], { type: fileTypeMap[fileType] })
                            const blobUrl = URL.createObjectURL(blob);
                            const iframe = document.createElement('iframe');
                            iframe.src = blobUrl;
                            setBlobUrl(() => blobUrl);
                            iframe.style.width = '100%';
                            iframe.style.minHeight = '700px';
                            iframe.onload = function () {
                                setLoading(false);
                            };
                            const freviewFileDom = document.getElementById('freviewFile');
                            while (freviewFileDom?.firstChild) {
                                freviewFileDom.removeChild(freviewFileDom.firstChild);
                            }
                            freviewFileDom?.appendChild(iframe);

                        } else if (fileType === 'doc' || fileType === 'docx') {
                            const blob = new Blob([res.data], { type: fileTypeMap[fileType] });
                            const box = document.createElement('div');
                            box.style.width = '80%';
                            box.style.minHeight = '700px';
                            box.style.marginLeft = '10%';
                            const freviewFileDom = document.getElementById('freviewFile');
                            while (freviewFileDom?.firstChild) {
                                freviewFileDom.removeChild(freviewFileDom.firstChild);
                            }
                            freviewFileDom?.appendChild(box);
                            let docx = require("docx-preview")
                            docx.renderAsync(blob, box).then(() => {
                                setLoading(false);
                                console.log("docx: finished")
                            }).catch(() => {
                                setLoading(false);
                                box.innerHTML = '文件解析失败，可下载预览';
                            })
                        } else {
                            setLoading(false);
                            const box = document.createElement('div');
                            box.style.width = '100%';
                            box.style.height = '300px';
                            box.style.textAlign = 'center';
                            box.style.fontSize = '18px';
                            box.style.lineHeight = '300px';
                            box.innerHTML = `暂不支持预览${fileType}格式，请自行下载预览`;
                            const freviewFileDom = document.getElementById('freviewFile');
                            while (freviewFileDom?.firstChild) {
                                freviewFileDom.removeChild(freviewFileDom.firstChild);
                            }
                            freviewFileDom?.appendChild(box);
                        }
                    }
                }
            }
        }).catch(err => {
            console.log(err);
            setLoading(false);
            const box = document.createElement('div');
            box.style.width = '100%';
            box.style.height = '300px';
            box.style.textAlign = 'center';
            box.style.fontSize = '18px';
            box.style.lineHeight = '300px';
            box.innerHTML = '解析文件失败了，可下载文件查看';
            const freviewFileDom = document.getElementById('freviewFile');
            while (freviewFileDom?.firstChild) {
                freviewFileDom.removeChild(freviewFileDom.firstChild);
            }
            freviewFileDom?.appendChild(box);
        })
    }

8. 监听code,控制弹窗

 useEffect(() => {
        if (code) {
            setModalVisit(true);
            if (getFileType(code)) {
                getFile(code);
            }
        } else {
            onClear();
        }

        return () => {
            onClear()
        }
    }, [code]);


// 监听弹窗，触发关闭函数
    useEffect(() => {
        if (!modalVisit) {
            onClose();
        }
    }, [modalVisit])

9.jsx

return (
        <ModalForm
            width="70vw"
            title="文件预览"
            open={modalVisit}
            style={{
                minHeight: '50vh',
                maxHeight: '90vh',
                overflowY: 'auto'
            }}
            onOpenChange={setModalVisit}
            submitter={false}
        >
            <Spin spinning={loading} delay={500} tip="加载中">
                <h1 style={{ fontSize: 18, marginBottom: 10 }}>{fileName}</h1>
                <div id="freviewFile" className="freviewFile" style={{ minHeight: 500 }}></div>
            </Spin>
        </ModalForm>
    )

index.tsx组件完整代码

1import { ModalForm } from "@ant-design/pro-components";
import React, { useEffect, useState } from "react";
import { getToken } from "@/utils";
import { downloadFile } from "@/services/ant-design-pro/project";
import Axios from "axios";
import { message, Spin } from 'antd';
import jsPreviewExcel from '@js-preview/excel';
import '@js-preview/excel/lib/index.css';
import './index.css';


type PreviewFileProps = {
    code: string;
    onClose(): void;
}
const PreviewFile: React.FC<PreviewFileProps> = ({ code, onClose }) => {
    const fileTypeMap = {
        "xls": "application/vnd.ms-excel",
        "xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        "doc": "application/msword",
        "docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        "pdf": "application/pdf",
        "ppt": "application/pdf",
        "pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
        "png": "image/png",
        "gif": "image/gif",
        "jpeg": "image/jpeg",
        "jpg": "image/jpeg",
        "txt": "text/plain",
    }
    const imgType = ['bmp', 'jpg', 'jpeg', 'png', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd', 'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'WMF', 'webp', 'avif', 'apng'];
    const videoType = ['wmv', 'asf', 'asx', 'rm', 'rmvb', 'mp4', '3gp', 'mov', 'm4v', 'avi', 'dat', 'mkv', 'flv', 'vob'];
    // const wordType = ['text', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'rar', 'zip', '7z', 'apz', 'ar', 'bz', 'car', 'dar', 'cpgz', 'f', 'ha', 'hbc', 'hbc2', 'hbe', 'hpk', 'hyp'];
    const token = getToken();
    const [loading, setLoading] = useState(false);
    const [modalVisit, setModalVisit] = useState(false);
    const [fileName, setFileName] = useState('');
    const [blobUrl, setBlobUrl] = React.useState('');
    const getFileName = (code: string) => {
        const lastSlashIndex = code.lastIndexOf('/');
        const fileName = code.substring(lastSlashIndex + 1);
        return fileName;
    }
    const getFileType = (name: string) => {
        if (name) {
            if (name.lastIndexOf(".") > -1) {
                return name.slice(name.lastIndexOf(".") + 1);
            } else {
                return false
            }
        }
    }

    const onClear = () => {
        blobUrl && window.URL.revokeObjectURL(blobUrl);
        setBlobUrl('');
        setFileName('');
        const freviewFileDom = document.getElementById('freviewFile')
        while (freviewFileDom?.firstChild) {
            freviewFileDom.removeChild(freviewFileDom.firstChild);
        }
    }

    const getFile = (code: string) => {
        setLoading(true);
        const fileName = getFileName(code);
        setFileName(fileName);
        const fileType = getFileType(code);
        if (!fileType) {
            return
        }

        Axios({
            url: downloadFile,
            method: "GET",
            responseType: 'blob',
            headers: {
                "Content-Type": " application/json;charset=UTF-8",
                "cattoken": token
            },
            params: { code: code }
        }).then(res => {
            const blob = new Blob([res.data])
            let reader = new FileReader();
            if (fileType === 'xls' || fileType === 'xlsx') {
                reader.readAsArrayBuffer(blob);
                reader.onload = async (e: any) => {
                    const box = document.createElement('div');
                    box.style.width = '94%';
                    box.style.minHeight = '700px';
                    box.style.marginLeft = '3%';
                    const myExcelPreviewer = jsPreviewExcel.init(box)
                    myExcelPreviewer
                        .preview(e.target.result)
                        .then(() => {
                            console.info('预览完成')
                            setLoading(false)
                        })
                        .catch((e) => {
                            console.info('预览失败', e)
                            setLoading(false)
                        })
                    const freviewFileDom = document.getElementById('freviewFile');
                    while (freviewFileDom?.firstChild) {
                        freviewFileDom.removeChild(freviewFileDom.firstChild);
                    }
                    freviewFileDom?.appendChild(box);
                }
            } else {
                reader.readAsText(blob);
                reader.onload = async (e: any) => {
                    if (e.target.result.indexOf('"statusCode"') >= 0) {
                        message.error(JSON.parse(e.target.result).message)
                    } else {
                        if (imgType.includes(fileType)) {
                            // 图片类预览
                            const blobUrl = URL.createObjectURL(blob);
                            var img = document.createElement('img');
                            img.onload = function () {
                                // 释放创建的URL对象
                                window.URL.revokeObjectURL(blobUrl);
                                setLoading(false);
                            };
                            img.src = blobUrl;
                            img.style.width = 'auto';
                            img.style.height = '300px';
                            const freviewFileDom = document.getElementById('freviewFile')
                            while (freviewFileDom?.firstChild) {
                                freviewFileDom.removeChild(freviewFileDom.firstChild);
                            }
                            freviewFileDom?.appendChild(img);
                        } else if (videoType.includes(fileType)) {
                            const blobUrl = URL.createObjectURL(blob);
                            // console.log('触发', videoType.includes(fileType), fileType, blobUrl)
                            // 创建video元素
                            const video = document.createElement('video');
                            video.controls = true;
                            video.style.width = '100%'; // 设置视频宽度为容器宽度
                            video.style.maxHeight = '100%'; // 设置视频最大高度为容器高度
                            // 当视频加载完成后释放URL对象
                            video.onended = function () {
                                URL.revokeObjectURL(blobUrl);
                            };
                            // 设置视频源
                            video.src = blobUrl;
                            setLoading(false)
                            // 获取预览容器元素
                            const freviewFileDom = document.getElementById('freviewFile')
                            while (freviewFileDom?.firstChild) {
                                freviewFileDom.removeChild(freviewFileDom.firstChild);
                            }
                            freviewFileDom?.appendChild(video);

                            // 将video元素添加到预览容器中
                            freviewFileDom?.appendChild(video);
                        } else if (fileType === 'pdf' || fileType === 'txt') {
                            const blob = new Blob([res.data], { type: fileTypeMap[fileType] })
                            const blobUrl = URL.createObjectURL(blob);
                            const iframe = document.createElement('iframe');
                            iframe.src = blobUrl;
                            setBlobUrl(() => blobUrl);
                            iframe.style.width = '100%';
                            iframe.style.minHeight = '700px';
                            iframe.onload = function () {
                                setLoading(false);
                            };
                            const freviewFileDom = document.getElementById('freviewFile');
                            while (freviewFileDom?.firstChild) {
                                freviewFileDom.removeChild(freviewFileDom.firstChild);
                            }
                            freviewFileDom?.appendChild(iframe);

                        } else if (fileType === 'doc' || fileType === 'docx') {
                            const blob = new Blob([res.data], { type: fileTypeMap[fileType] });
                            const box = document.createElement('div');
                            box.style.width = '80%';
                            box.style.minHeight = '700px';
                            box.style.marginLeft = '10%';
                            const freviewFileDom = document.getElementById('freviewFile');
                            while (freviewFileDom?.firstChild) {
                                freviewFileDom.removeChild(freviewFileDom.firstChild);
                            }
                            freviewFileDom?.appendChild(box);
                            let docx = require("docx-preview")
                            docx.renderAsync(blob, box).then(() => {
                                setLoading(false);
                                console.log("docx: finished")
                            }).catch(() => {
                                setLoading(false);
                                box.innerHTML = '文件解析失败，可下载预览';
                            })
                        } else {
                            setLoading(false);
                            const box = document.createElement('div');
                            box.style.width = '100%';
                            box.style.height = '300px';
                            box.style.textAlign = 'center';
                            box.style.fontSize = '18px';
                            box.style.lineHeight = '300px';
                            box.innerHTML = `暂不支持预览${fileType}格式，请自行下载预览`;
                            const freviewFileDom = document.getElementById('freviewFile');
                            while (freviewFileDom?.firstChild) {
                                freviewFileDom.removeChild(freviewFileDom.firstChild);
                            }
                            freviewFileDom?.appendChild(box);
                        }
                    }
                }
            }
        }).catch(err => {
            console.log(err);
            setLoading(false);
            const box = document.createElement('div');
            box.style.width = '100%';
            box.style.height = '300px';
            box.style.textAlign = 'center';
            box.style.fontSize = '18px';
            box.style.lineHeight = '300px';
            box.innerHTML = '解析文件失败了，可下载文件查看';
            const freviewFileDom = document.getElementById('freviewFile');
            while (freviewFileDom?.firstChild) {
                freviewFileDom.removeChild(freviewFileDom.firstChild);
            }
            freviewFileDom?.appendChild(box);
        })
    }

    useEffect(() => {
        if (code) {
            setModalVisit(true);
            if (getFileType(code)) {
                getFile(code);
            }
        } else {
            onClear();
        }

        return () => {
            onClear()
        }
    }, [code]);


    useEffect(() => {
        if (!modalVisit) {
            onClose();
        }
    }, [modalVisit])

    return (
        <ModalForm
            width="70vw"
            title="文件预览"
            open={modalVisit}
            style={{
                minHeight: '50vh',
                maxHeight: '90vh',
                overflowY: 'auto'
            }}
            onOpenChange={setModalVisit}
            submitter={false}
        >
            <Spin spinning={loading} delay={500} tip="加载中">
                <h1 style={{ fontSize: 18, marginBottom: 10 }}>{fileName}</h1>
                <div id="freviewFile" className="freviewFile" style={{ minHeight: 500 }}></div>
            </Spin>
        </ModalForm>
    )
}

export default PreviewFile;

使用组件PreviewFile

import PreviewFile from '@/components/PreviewFile';

    // 文件预览
    // 禁用鼠标右键的函数
    const handleContextMenu = useCallback((event: MouseEvent) => {
        event.preventDefault(); // 阻止默认的上下文菜单
    }, []);
    const [fileCode, setFileCode] = useState('');
    const onClosePreviewFile = () => {
        setFileCode('');
        document.removeEventListener('contextmenu', handleContextMenu);
    }



 <PreviewFile code={fileCode} onClose={onClosePreviewFile} />

code长什么样

code:bd55170a-e846-4cac-838f-b04d625g7e88/lalala.xlsx
大致张这个样吧

luback
关注
blob 在线解码_一款支持在线的磁力播放工具
weixin_39955421的博客
10-25 1万+
平时下载一些视频文件时往往需要去网上寻找各种磁力链接或者torrent种子再用BT下载工具进行下载，对于视频文件来说能够提前预览就能很好的对视频内容进行简单的预览，这样就不会被一些挂羊头卖狗肉的封面图误导了，从网络中下载的资源良萎不齐能够事前预览还是能够在一定程度上避免一些信息安全问题的。torrent以及磁力在线的工具大家可能会对某雷比较熟悉，但是也仅仅是边下边播并不是纯粹的在线播放体...
React 实现 PDF 文件在线预览 - 手把手教你写 React PDF 预览功能
蒋川@卡拉云
05-30 5204
在 React 项目中，很多场景都需要 PDF 文件预览功能，比如合同 ERP，销售CRM，内部文档 CMS 管理系统，都需要内置 PDF 文件在线预览功能。本文手把手教你搭建一套 PDF 预览组件嵌入到 React 项目中，实现 PDF 文件预览的所有常见功能。跟随本教程学习完成后，你会搭出以下 PDF 在线预览效果的 React PDF 预览组件
如何优雅地在 React 中通过 URL 预览 Excel 文件：从代码到最佳实践
最新发布
weixin_41644392的博客
03-21 553
React Excel 预览、从 URL 加载 Excel、XLSX 解析、react-table 教程、前端数据展示优化。
记axios实现blob文件在线预览二进制流pdf
qq_42792142的博客
11-30 789
blob文件在线预览二进制流pdf
react预览word文档和Excel文档
qq_40429514的博客
05-31 875
react预览word文档和Excel文档
React实现在线预览word报告/本地选择报告预览
ZhaoYulin6的博客
06-04 2610
react在线预览docx文件，并保留格式，包含保留目录调整等样式
使用blob实现文件下载和图片预览
ouzexi的博客
03-20 1万+
学习blob对象的笔记 blob叫做二进制大对象(binary large object)主要是存放二进制的容器。 1 存取文本 存放二进制数据，类似数组size为数据长度，type指定类型 example： var str = 'hello world' var blob = new Blob([str], { type: 'text/plain' }) console.log('blob:', blob) 打印结果： 调用t
React中使用react-file-viewer，实现预览office文件（pdf,word,xlsx等文件）前端实现，在浏览器打开文件
热门推荐
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
12-11 4万+
前言： 最近做一个项目要求在前端浏览器可以直接打开office文件（pdf,doc,xlsx等文件）。pdf浏览器可以直接打开（可以直接用a标签href="文件地址"或者iframe标签src="文件地址"再或者使用pdf.js）。但是word,xlsl等文件很难实现，网上的实现方式有微软的方法实现但是访问的文件地址必须是公共文件，所有人都能访问到才可以使用，显然是不行的，所以我就找到了reac...
React（三）：PDF文件在线预览（简易版）
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
08-04 1080
【代码】React（三）：PDF文件在线预览（简易版）
blob html 预览_本地图片预览+blob使用
weixin_39796238的博客
12-23 1030
说明：做要用到file标签和 html5 Blob对象方法1：使用file标签请选择一个文件：// 将文件以Data URL形式进行读入页面function readAsDataURL(){// 检查是否为图像类型var simpleFile = document.getElementById("file").files[0];if(!/image\/\w+/.test(simpleFile.ty...
react项目实现文件预览，比如PDF、txt、word、Excel、ppt等常见文件（腾讯云cos）
YanHSama的博客
10-24 4928
使用腾讯云文档预览，需要开通文档预览功能，该功能需要收费的。如果需要图片预览、视频或音频可以使用获取下载链接。使用cos获取预览文档链接。
react-pdf-viewer：查看PDF文档的React组件
02-06
React PDF查看器 一个用于查看PDF文档的React组件。 它是用TypeScript编写的，并且完全由React挂钩提供支持。 import { Viewer } from '@react-pdf-viewer/core' ; // Import styles import '@react-pdf-viewer/core/lib/styles/index.css' ; < Viewer fileUrl = '/path/to/document.pdf'> 产品特点 基本特征 支持密码保护的文件 缩放：支持自定义级别，例如实际大小，页面适合度和页面宽度 页面间导航 可以
在页面中展示 Blob 类型的文件
lixin5456985的博客
12-12 974
适合展示 PDF 文件或 HTML 内容。标签，用户可以下载 Blob 文件。
手写React的Fiber架构，深入理解其原理
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
08-05 831
熟悉React的朋友都知道，React支持jsx语法，我们可以直接将HTML代码写到JS中间，然后渲染到页面上，我们写的HTML如果有更新的话，React还有虚拟DOM的对比，只更新变化...
【React】前端React 代码中预览展示excel文件
郭昊的博客
02-02 3150
【代码】前端React 代码中预览展示excel文件。
JavaScript总结2
crazyhsl的博客
01-10 153
Bom浏览器对象模型 概念:Browser Object Model 组成: window:浏览器窗口对象 navigator:浏览器对象 Screen:显示器屏幕对象 History:历史记录对象 Location:地址栏对象 Window:浏览器窗口对象 1.创建 不用创建,直接使用Window对象中的属性和方法 2.方法的使用 与弹出框有关的方...
react中预览excel表格
老实敲代码，佛只渡有缘人
10-08 1951
react预览excel文件
react页面预览_基于React的组件可视化页面编辑
weixin_34098209的博客
01-24 1960
开源项目名称：react-visual-editor项目描述：react-visual-editor 是一款基于umi block开源的工具类项目，开源时间为2020.2.22，其目的是为了解决不会React技术栈的人员可以通过组件拖拽生成React页面与代码。 工具通过React合成事件对React组件做了拖拽属性等的默认包装使组件支持拖拽等功能，实现了组件可视化随意拖拽嵌套，并生成可运行的代码...
Blob 对象实现文件预览下载
望京十三兄的博客
11-07 639
Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob，继承了 blob 的功能并将其扩展以支持用户系统上的文件。官方关于blob的介绍。文件预览 （wps）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值