前端实现文件预览功能

需求：实现一个在线预览pdf、excel、word、图片等文件的功能。
介绍：支持pdf、xlsx、docx、jpg、png、jpeg。
以下使用Vue3代码实现所有功能，建议以下的预览文件标签可以在外层包裹一层弹窗。
图片预览

iframe标签能够将另一个HTML页面嵌入到当前页面中，我们的图片也能够使用iframe标签来进行展示。

</code></pre><p data-track='8'><span style='letter-spacing: 1.5px;'><strong><span style='color: #595959; --tt-darkmode-color: #595959;'>「sandbox」</span></strong><span style='color: #595959; --tt-darkmode-color: #595959;'>这个属性如果是单纯预览图片可以不使用，该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。属性值可以为空字符串（这种情况下会启用所有限制），也可以是用空格分隔的一系列指定的字符串。</span></span></p><ul><li data-track='9'><span style='letter-spacing: 1.5px;'><span style='color: #595959; --tt-darkmode-color: #595959;'>allow-scripts: 允许嵌入的浏览上下文运行脚本（但不能创建弹窗）。如果没有使用该关键字，就无法运行脚本。</span></span></li><li data-track='10'><span style='letter-spacing: 1.5px;'><span style='color: #595959; --tt-darkmode-color: #595959;'>allow-top-navigation: 允许将框架内所加载页面中的超链接导航到父级窗口</span></span></li><li data-track='11'><span style='letter-spacing: 1.5px;'><span style='color: #595959; --tt-darkmode-color: #595959;'>allow-same-popups: 允许弹窗 (例如 window.open, target="_blank")。如果没有使用该关键字，相应的功能将自动被禁用。</span></span></li><li data-track='12'><span style='letter-spacing: 1.5px;'><span style='color: #595959; --tt-darkmode-color: #595959;'>allow-same-origin: 如果没有使用该关键字，嵌入的浏览上下文将被视为来自一个独立的源，这将使 same-origin policy 同源检查失败。使用了这个属性，那么当前页面和iframe打开的页面视为同源。</span></span></li></ul><h1 class='pgc-h-arrow-right' data-track='13'>word文档预览（docx）</h1><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code>先下载npm包
npm i docx-preview --save
</code></pre><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><div class='docxRef'></div>

&lt;script&gt;
import { renderAsync } from 'docx-preview';

function fn() {
// 这里的res.data是 blob文件流，如果自己的不是blob文件流
// 可以通过URL.createObjectURL(参数) 参数为File格式，转换为blob文件流
    let blob = res.data
    let childRef = document.getElementsByClassName('docxRef');
    renderAsync(blob, childRef[0]) //渲染
}
fn()

&lt;/script&gt;
</code></pre><p data-track='16'><span style='letter-spacing: 1.5px;'><strong><span style='color: #595959; --tt-darkmode-color: #595959;'>「blob文件流」</span></strong></span></p><div class='pgc-img'><p class='pgc-img-caption'></p></div><h1 class='pgc-h-arrow-right' data-track='17'>预览excel文件(xlsx)</h1><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code>下载包
npm install xlsx@0.16.0
</code></pre><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><div class='xlsxClass'></div>
const reader = new FileReader();
//通过readAsArrayBuffer将blob转换为ArrayBuffer对
reader.readAsArrayBuffer(res.data) // 这里的res.data是blob文件流
reader.onload = (event) =&gt; {
  // 读取ArrayBuffer数据变成Uint8Array
  var data = new Uint8Array(event.target.result);
  // 这里的data里面的类型和后面的type类型要对应
  var workbook = XLSX.read(data, { type: "array" });
  var sheetNames = workbook.SheetNames; // 工作表名称
  var worksheet = workbook.Sheets[sheetNames[0]];
  // var excelData = XLSX.utils.sheet_to_json(worksheet); //JSON
  let html = XLSX.utils.sheet_to_html(worksheet);
  document.getElementsByClassName('xlsxClass')[0].innerHTML = html
};

</code></pre><h1 class='pgc-h-arrow-right' data-track='20'>pdf预览</h1><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code>下载包 npm install pdfjs-dist
我使用的是npm install pdfjs-dist@2.0.943版本，以下例子使用的是vue3+vite创建的项目
以下例子通过canvas来渲染pdf
</code></pre><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><template>
  <div class='box'>
    <div class='tool-bar'>
      <div>{{ pdfParams.pageNumber }} / {{ pdfParams.total }}</div>
      <button type='primary' :disabled='pdfParams.pageNumber == pdfParams.total' click='nextPage'>下一页
      </button>
      <button type='primary' :disabled='pdfParams.pageNumber == 1' click='prevPage'>上一页</button>
    </div>
    <canvas id='pdf-render'></canvas>
  </div>
</template>

</code></pre><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code>&lt;script setup&gt;
import { onMounted, ref, reactive } from 'vue'
const pdfParams = reactive({
  pageNumber: 1, // 当前页
  total: 0, // 总页数
});

// 不要定义为ref或reactive格式，就定义为普通的变量
let pdfDoc = null;
// 这里必须使用异步去引用pdf文件，直接去import会报错，也不知道为什么
onMounted(async ()=&gt; {
  let pdfjs = await import('pdfjs-dist/build/pdf')
  let pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.entry')
  pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker
  // 此文件位于public/test2.pdf
  let url = ref('/test2.pdf')
  pdfjs.getDocument(url.value).promise.then(doc =&gt; {
    pdfDoc = doc
    pdfParams.total = doc.numPages
    getPdfPage(1)
  })
})

// 加载pdf的某一页
const getPdfPage = (number) =&gt; {
  pdfDoc.getPage(number).then(page =&gt; {
    const viewport = page.getViewport()
    const canvas = document.getElementById('pdf-render')
    const context = canvas.getContext('2d')
    canvas.width = viewport.viewBox[2]
    canvas.height = viewport.viewBox[3]
    viewport.width = viewport.viewBox[2]
    viewport.height = viewport.viewBox[3]
    canvas.style.width = Math.floor(viewport.width) + 'px'
    canvas.style.height = Math.floor(viewport.height) + 'px'

    let renderContext = {
      canvasContext: context,
      viewport: viewport,
      // 这里transform的六个参数，使用的是transform中的Matrix(矩阵)
      transform: [1, 0, 0, -1, 0, viewport.height]
    }
    // 进行渲染
    page.render(renderContext)
  })
}
// 下一页功能
const prevPage = () =&gt; {
  if(pdfParams.pageNumber &gt; 1) {
    pdfParams.pageNumber -= 1
  } else {
    pdfParams.pageNumber  = 1
  }
  getPdfPage(pdfParams.pageNumber)
}
// 上一页功能
const nextPage = () =&gt; {
  if(pdfParams.pageNumber &lt; pdfParams.total) {
    pdfParams.pageNumber += 1
  } else {
    pdfParams.pageNumber = pdfParams.total
  }
  getPdfPage(pdfParams.pageNumber)
}
&lt;/script&gt;
</code></pre><p data-track='24'><span style='letter-spacing: 1.5px;'><span style='color: #595959; --tt-darkmode-color: #595959;'>以上pdf代码引用文章：(54条消息) 前端pdf预览、pdfjs的使用_pdf.js_无知的小菜鸡的博客-CSDN博客<br>pdfjs官方代码：例子 (mozilla.github.io)<br>以上代码看不懂的地方可以查阅官方代码，大部分都是固定的写法。</span></span></p><div class='pgc-img'><p class='pgc-img-caption'></p></div><p data-track='25'><span style='letter-spacing: 1.5px;'><strong><span style='color: #595959; --tt-darkmode-color: #595959;'>「以上注意点:」</span></strong></span></p><ul><li data-track='26'><span style='letter-spacing: 1.5px;'><span style='color: #595959; --tt-darkmode-color: #595959;'>必须异步引用pdf的文件！！！</span></span></li><li data-track='27'><span style='letter-spacing: 1.5px;'><span style='color: #595959; --tt-darkmode-color: #595959;'>pdf演示文件位于public/test2.pdf</span></span></li><li data-track='28'><span style='letter-spacing: 1.5px;'><span style='color: #595959; --tt-darkmode-color: #595959;'>transform: [1, 0, 0, -1, 0, viewport.height],使用了transform中的Matrix(矩阵)</span></span></li><li data-track='29'><span style='letter-spacing: 1.5px;'><span style='color: #595959; --tt-darkmode-color: #595959;'>下一页和上一页功能都需要重新渲染</span></span></li></ul>
    <div class="info-share-box clearfix">
        <div class="fl">
                        <p class="tags"><strong>Tags：</strong><a href="http://www.balukai.com/tags-237.html" title="查看更多有关于“文件夹中pdf预览不显示”的内容" rel="tag" target="_blank">文件夹中pdf预览不显示</a></p>
                    </div>
                <div class="fr">
                        <div class="info-share">
                <div class="social-share" data-initialized="true">
                    <a href="#" class="social-share-icon iconfont icon-weibo"></a>
                    <a href="#" class="social-share-icon iconfont icon-qq"></a>
                    <a href="#" class="social-share-icon iconfont icon-wechat"></a>
                    <a href="#" class="social-share-icon iconfont icon-qzone"></a>
                </div>
            </div>
            <script src="http://www.balukai.com/zb_users/theme/txcms2/script/social-share.min.js"></script>
                    </div>
            </div>
</div>
<div class="sx mb15">
    <ul>
        <li class="fl">上一篇：            <a href="http://www.balukai.com/post/4519.html" title="技巧 | Articulate RISE 360设置 PDF 查看器">技巧 | Articulate RISE 360设置 PDF 查看器</a>
                    </li>
        <li class="fr ziyou">下一篇：            <a href="http://www.balukai.com/post/4521.html" title="相见恨晚:windows十款必装的逆天神器">相见恨晚:windows十款必装的逆天神器</a>
                    </li>
        <div class="clear"></div>
    </ul>
</div>


<div class="xg">
    <h2 class="ybbt">猜你喜欢</h2>
        <ul>
                <li><span class="">2025-03-24</span><i class="fa fa-caret-right"></i> <a href="http://www.balukai.com/post/4528.html" title="OFD文件用哪些软件可以打开预览?（能打开ofd文件的软件）">OFD文件用哪些软件可以打开预览?（能打开ofd文件的软件）</a></li>
                <li><span class="">2025-03-24</span><i class="fa fa-caret-right"></i> <a href="http://www.balukai.com/post/4527.html" title="实现PDF的预览和下载功能（实现pdf的预览和下载功能的快捷键）">实现PDF的预览和下载功能（实现pdf的预览和下载功能的快捷键）</a></li>
                <li><span class="">2025-03-24</span><i class="fa fa-caret-right"></i> <a href="http://www.balukai.com/post/4526.html" title="SumatraPDF - 免费轻量的 PDF 阅读器">SumatraPDF - 免费轻量的 PDF 阅读器</a></li>
                <li><span class="">2025-03-24</span><i class="fa fa-caret-right"></i> <a href="http://www.balukai.com/post/4525.html" title="文件或目录损坏且无法读取，文件数据还能恢复吗?">文件或目录损坏且无法读取，文件数据还能恢复吗?</a></li>
                <li><span class="">2025-03-24</span><i class="fa fa-caret-right"></i> <a href="http://www.balukai.com/post/4524.html" title="软网推荐:文件一“转身”离了软件也能用">软网推荐:文件一“转身”离了软件也能用</a></li>
                <li><span class="">2025-03-24</span><i class="fa fa-caret-right"></i> <a href="http://www.balukai.com/post/4523.html" title="实用小技巧:预览Word文档，快速找出需要的内容!">实用小技巧:预览Word文档，快速找出需要的内容!</a></li>
                <li><span class="">2025-03-24</span><i class="fa fa-caret-right"></i> <a href="http://www.balukai.com/post/4522.html" title="PDF的查找和替换在哪里?如何全部替换?">PDF的查找和替换在哪里?如何全部替换?</a></li>
                <li><span class="">2025-03-24</span><i class="fa fa-caret-right"></i> <a href="http://www.balukai.com/post/4521.html" title="相见恨晚:windows十款必装的逆天神器">相见恨晚:windows十款必装的逆天神器</a></li>
                <li><span class="">2025-03-24</span><i class="fa fa-caret-right"></i> <a href="http://www.balukai.com/post/4519.html" title="技巧 | Articulate RISE 360设置 PDF 查看器">技巧 | Articulate RISE 360设置 PDF 查看器</a></li>
                <li><span class="">2025-03-24</span><i class="fa fa-caret-right"></i> <a href="http://www.balukai.com/post/4518.html" title="教你在苹果电脑上玩转 PDF（苹果电脑如何用pdf）">教你在苹果电脑上玩转 PDF（苹果电脑如何用pdf）</a></li>
            </ul>
</div>
</div>
                    
    </div>
    
        <div class="right fr sjwu">
                
<dl class="wupd"> 
    <div class="notice"> 
        <div class="tab-hd"> 
            <ul class="tab-nav"> 
                <li class="on"><a href="javascript:;">最新文章</a></li> 
                <li><a href="javascript:;">热门文章</a></li> 
                <li><a href="javascript:;" class="wux">推荐文章</a></li>
            </ul> 
        </div> 
        <div class="tab-bd"> 
            <div class="tab-pal" style="display:block">
                <ul>
                                        
<li><span class="fr zuo10">04-10</span><a href="http://www.balukai.com/post/5293.html" title="今秋减龄又抢眼的小清新风格（小清新造型）" target="_blank">今秋减龄又抢眼的小清新风格（小清新造型）</a></li>
<li><span class="fr zuo10">04-10</span><a href="http://www.balukai.com/post/5292.html" title="超模Kasia Struss诠释夸张的性感美妆大片" target="_blank">超模Kasia Struss诠释夸张的性感美妆大片</a></li>
<li><span class="fr zuo10">04-10</span><a href="http://www.balukai.com/post/5291.html" title="纪梵希推出全新魔幻天使香水和魔法香氛" target="_blank">纪梵希推出全新魔幻天使香水和魔法香氛</a></li>
<li><span class="fr zuo10">04-10</span><a href="http://www.balukai.com/post/5290.html" title="夏日脱妆一边去 改变底妆很重要（夏天脱妆）" target="_blank">夏日脱妆一边去 改变底妆很重要（夏天脱妆）</a></li>
<li><span class="fr zuo10">04-10</span><a href="http://www.balukai.com/post/5289.html" title="趣味风格小设计 工业风还能这样玩" target="_blank">趣味风格小设计 工业风还能这样玩</a></li>
<li><span class="fr zuo10">04-10</span><a href="http://www.balukai.com/post/5288.html" title="CBN丨China&amp;#39;s largest air show takes off with star fighter jet model" target="_blank">CBN丨China&amp;#39;s largest air show takes off with star fighter jet model</a></li>
<li><span class="fr zuo10">04-10</span><a href="http://www.balukai.com/post/5287.html" title="夏日粉刺怎么消除 好方法大收集（夏季长粉刺的原因）" target="_blank">夏日粉刺怎么消除 好方法大收集（夏季长粉刺的原因）</a></li>
<li><span class="fr zuo10">04-10</span><a href="http://www.balukai.com/post/5286.html" title="炎热的夏季 露出你性感肩膀的穿搭" target="_blank">炎热的夏季 露出你性感肩膀的穿搭</a></li>
                                    </ul>
            </div>
            <div class="tab-pal">
                <ul>
                                        
<li><span class="fr zuo10">686℃</span><a href="http://www.balukai.com/post/2023.html" title="探访银行凭证管理员:每天平均接触上千位数字" target="_blank">探访银行凭证管理员:每天平均接触上千位数字</a></li>
<li><span class="fr zuo10">356℃</span><a href="http://www.balukai.com/post/2028.html" title="转发，三大银行(工行、建行、农行) 新IT架构总览" target="_blank">转发，三大银行(工行、建行、农行) 新IT架构总览</a></li>
<li><span class="fr zuo10">258℃</span><a href="http://www.balukai.com/post/4638.html" title="C语言 ftell 与 fseek 的深度结合应用" target="_blank">C语言 ftell 与 fseek 的深度结合应用</a></li>
<li><span class="fr zuo10">255℃</span><a href="http://www.balukai.com/post/4640.html" title="PHP常用类 – 缓存类 cache（php几大缓存技术）" target="_blank">PHP常用类 – 缓存类 cache（php几大缓存技术）</a></li>
<li><span class="fr zuo10">190℃</span><a href="http://www.balukai.com/post/4094.html" title="面试官:事务到底是隔离还是不隔离?" target="_blank">面试官:事务到底是隔离还是不隔离?</a></li>
<li><span class="fr zuo10">177℃</span><a href="http://www.balukai.com/post/3076.html" title="C语言 - 常见程序崩溃分析_c语言崩溃代码" target="_blank">C语言 - 常见程序崩溃分析_c语言崩溃代码</a></li>
<li><span class="fr zuo10">168℃</span><a href="http://www.balukai.com/post/444.html" title="解决Github访问慢问题，加速你的Github!Github访问加速工具" target="_blank">解决Github访问慢问题，加速你的Github!Github访问加速工具</a></li>
<li><span class="fr zuo10">167℃</span><a href="http://www.balukai.com/post/3908.html" title="使用 GORM 自动生成 Golang 代码" target="_blank">使用 GORM 自动生成 Golang 代码</a></li>
                                    </ul>
            </div>
            <div class="tab-pal">
                <ul>
                                        
                                    </ul>
            </div>
        </div> 
    </div>
</dl>
                

<dl class="function" id="divPrevious">
<dt class="function_t">最近发表</dt><dd class="function_c">


<ul><li><a title="今秋减龄又抢眼的小清新风格（小清新造型）" href="http://www.balukai.com/post/5293.html">今秋减龄又抢眼的小清新风格（小清新造型）</a></li>
<li><a title="超模Kasia Struss诠释夸张的性感美妆大片" href="http://www.balukai.com/post/5292.html">超模Kasia Struss诠释夸张的性感美妆大片</a></li>
<li><a title="纪梵希推出全新魔幻天使香水和魔法香氛" href="http://www.balukai.com/post/5291.html">纪梵希推出全新魔幻天使香水和魔法香氛</a></li>
<li><a title="夏日脱妆一边去 改变底妆很重要（夏天脱妆）" href="http://www.balukai.com/post/5290.html">夏日脱妆一边去 改变底妆很重要（夏天脱妆）</a></li>
<li><a title="趣味风格小设计 工业风还能这样玩" href="http://www.balukai.com/post/5289.html">趣味风格小设计 工业风还能这样玩</a></li>
<li><a title="CBN丨China&amp;#39;s largest air show takes off with star fighter jet model" href="http://www.balukai.com/post/5288.html">CBN丨China&amp;#39;s largest air show takes off with star fighter jet model</a></li>
<li><a title="夏日粉刺怎么消除 好方法大收集（夏季长粉刺的原因）" href="http://www.balukai.com/post/5287.html">夏日粉刺怎么消除 好方法大收集（夏季长粉刺的原因）</a></li>
<li><a title="炎热的夏季 露出你性感肩膀的穿搭" href="http://www.balukai.com/post/5286.html">炎热的夏季 露出你性感肩膀的穿搭</a></li>
<li><a title="四招轻松应对换季时期的头皮敏感（为什么换季的时候头皮会痒）" href="http://www.balukai.com/post/5285.html">四招轻松应对换季时期的头皮敏感（为什么换季的时候头皮会痒）</a></li>
<li><a title="固特异概念轮胎展示（固特异轮胎介绍）" href="http://www.balukai.com/post/5284.html">固特异概念轮胎展示（固特异轮胎介绍）</a></li>
</ul>

</dd>
</dl>
<dl class="function" id="divTags">
<dt class="function_t">标签列表</dt><dd class="function_c">


<ul><li><a title="newcoder" href="http://www.balukai.com/tags-32.html">newcoder<span class="tag-count"> (56)</span></a></li>
<li><a title="字符串的长度是指" href="http://www.balukai.com/tags-35.html">字符串的长度是指<span class="tag-count"> (45)</span></a></li>
<li><a title="drawcontours()参数说明" href="http://www.balukai.com/tags-39.html">drawcontours()参数说明<span class="tag-count"> (60)</span></a></li>
<li><a title="unsignedshortint" href="http://www.balukai.com/tags-56.html">unsignedshortint<span class="tag-count"> (59)</span></a></li>
<li><a title="postman并发请求" href="http://www.balukai.com/tags-85.html">postman并发请求<span class="tag-count"> (47)</span></a></li>
<li><a title="python列表删除" href="http://www.balukai.com/tags-97.html">python列表删除<span class="tag-count"> (50)</span></a></li>
<li><a title="左程云什么水平" href="http://www.balukai.com/tags-98.html">左程云什么水平<span class="tag-count"> (56)</span></a></li>
<li><a title="计算机网络的拓扑结构是指()" href="http://www.balukai.com/tags-105.html">计算机网络的拓扑结构是指()<span class="tag-count"> (45)</span></a></li>
<li><a title="稳压管的稳压区是工作在什么区" href="http://www.balukai.com/tags-120.html">稳压管的稳压区是工作在什么区<span class="tag-count"> (45)</span></a></li>
<li><a title="编程题" href="http://www.balukai.com/tags-126.html">编程题<span class="tag-count"> (64)</span></a></li>
<li><a title="postgresql默认端口" href="http://www.balukai.com/tags-132.html">postgresql默认端口<span class="tag-count"> (66)</span></a></li>
<li><a title="数据库的概念模型独立于" href="http://www.balukai.com/tags-133.html">数据库的概念模型独立于<span class="tag-count"> (48)</span></a></li>
<li><a title="产生系统死锁的原因可能是由于" href="http://www.balukai.com/tags-139.html">产生系统死锁的原因可能是由于<span class="tag-count"> (51)</span></a></li>
<li><a title="数据库中只存放视图的" href="http://www.balukai.com/tags-141.html">数据库中只存放视图的<span class="tag-count"> (62)</span></a></li>
<li><a title="在vi中退出不保存的命令是" href="http://www.balukai.com/tags-144.html">在vi中退出不保存的命令是<span class="tag-count"> (53)</span></a></li>
<li><a title="哪个命令可以将普通用户转换成超级用户" href="http://www.balukai.com/tags-146.html">哪个命令可以将普通用户转换成超级用户<span class="tag-count"> (49)</span></a></li>
<li><a title="noscript标签的作用" href="http://www.balukai.com/tags-150.html">noscript标签的作用<span class="tag-count"> (48)</span></a></li>
<li><a title="联合利华网申" href="http://www.balukai.com/tags-152.html">联合利华网申<span class="tag-count"> (49)</span></a></li>
<li><a title="swagger和postman" href="http://www.balukai.com/tags-159.html">swagger和postman<span class="tag-count"> (46)</span></a></li>
<li><a title="结构化程序设计主要强调" href="http://www.balukai.com/tags-165.html">结构化程序设计主要强调<span class="tag-count"> (53)</span></a></li>
<li><a title="172.1" href="http://www.balukai.com/tags-167.html">172.1<span class="tag-count"> (57)</span></a></li>
<li><a title="apipostwebsocket" href="http://www.balukai.com/tags-169.html">apipostwebsocket<span class="tag-count"> (47)</span></a></li>
<li><a title="唯品会后台" href="http://www.balukai.com/tags-173.html">唯品会后台<span class="tag-count"> (61)</span></a></li>
<li><a title="简历助手" href="http://www.balukai.com/tags-176.html">简历助手<span class="tag-count"> (56)</span></a></li>
<li><a title="offshow" href="http://www.balukai.com/tags-286.html">offshow<span class="tag-count"> (61)</span></a></li>
</ul>

</dd>
</dl>    </div>
    
    <div class="clear"></div>

            </div>

<div class="footer">
    <div class="zh">
                    </div>
</div>

<div class="fixed-right">
        <a href="javascript:;" class="gotop bgb" title="回到顶部"><i class="fa fa-chevron-up"></i></a>
</div>

<script src="http://www.balukai.com/zb_users/theme/txcms2/script/txcstx.min.js?v=2024-09-18"></script>
</body>

</html><!--2,325.09 ms , 13 queries , 3234kb memory , 0 error-->
网站首页 > 文章精选正文

前端实现文件预览(pdf、excel、word、图片)

前端实现文件预览功能

图片预览

网站首页 > 文章精选 正文

前端实现文件预览(pdf、excel、word、图片)

前端实现文件预览功能

图片预览

网站首页 > 文章精选正文
