天天快消息！记录--前端实现文件预览（pdf、excel、word、图片）

2023-06-20 18:55:11 来源：博客园
【资料图】
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

前端实现文件预览功能

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

iframe标签能够将另一个HTML页面嵌入到当前页面中，我们的图片也能够使用iframe标签来进行展示。
</pre><p><strong>sandbox</strong>这个属性如果是单纯预览图片可以不使用，该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。属性值可以为空字符串（这种情况下会启用所有限制），也可以是用空格分隔的一系列指定的字符串。</p><ul><li><code>allow-scripts</code>: 允许嵌入的浏览上下文运行脚本（但不能创建弹窗）。如果没有使用该关键字，就无法运行脚本。</li><li><code>allow-top-navigation</code>: 允许将框架内所加载页面中的超链接导航到父级窗口</li><li><code>allow-same-popups</code>: 允许弹窗 (例如 window.open, target="_blank")。如果没有使用该关键字，相应的功能将自动被禁用。</li><li><code>allow-same-origin</code>: 如果没有使用该关键字，嵌入的浏览上下文将被视为来自一个独立的源，这将使 same-origin policy 同源检查失败。使用了这个属性，那么当前页面和iframe打开的页面视为同源。</li></ul><h2 data-id="heading-2">word文档预览（docx）</h2><pre class="brush:csharp;gutter:true;">先下载npm包npm i docx-preview --save</pre><pre class="brush:csharp;gutter:true;"><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;</pre>blob文件流<h2 data-id="heading-3">预览excel文件(xlsx)</h2><pre class="brush:csharp;gutter:true;">下载包npm install xlsx@0.16.0</pre><pre class="brush:csharp;gutter:true;"><div class="xlsxClass"></div>const reader = new FileReader();//通过readAsArrayBuffer将blob转换为ArrayBuffer对reader.readAsArrayBuffer(res.data) // 这里的res.data是blob文件流reader.onload = (event) => {  // 读取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};</pre><h2 data-id="heading-4">pdf预览</h2><pre class="brush:csharp;gutter:true;">下载包 npm install pdfjs-dist我使用的是npm install pdfjs-dist@2.0.943版本，以下例子使用的是vue3+vite创建的项目以下例子通过canvas来渲染pdf</pre><pre class="brush:csharp;gutter:true;"><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></pre><pre class="brush:csharp;gutter:true;">&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 ()=> {  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 => {    pdfDoc = doc    pdfParams.total = doc.numPages    getPdfPage(1)  })})// 加载pdf的某一页const getPdfPage = (number) => {  pdfDoc.getPage(number).then(page => {    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 = () => {  if(pdfParams.pageNumber > 1) {    pdfParams.pageNumber -= 1  } else {    pdfParams.pageNumber  = 1  }  getPdfPage(pdfParams.pageNumber)}// 上一页功能const nextPage = () => {  if(pdfParams.pageNumber < pdfParams.total) {    pdfParams.pageNumber += 1  } else {    pdfParams.pageNumber = pdfParams.total  }  getPdfPage(pdfParams.pageNumber)}&lt;/script&gt;</pre>以上pdf代码引用文章：(54条消息) 前端pdf预览、pdfjs的使用_pdf.js_无知的小菜鸡的博客-CSDN博客pdfjs官方代码：例子 (mozilla.github.io)以上代码看不懂的地方可以查阅官方代码，大部分都是固定的写法。<p><strong>以上注意点:</strong></p><ul><li>必须异步引用pdf的文件！！！</li><li>pdf演示文件位于public/test2.pdf</li><li>transform: [1, 0, 0, -1, 0, viewport.height],使用了transform中的Matrix(矩阵)</li><li>下一页和上一页功能都需要重新渲染</li></ul><h3 id="tid-A8dYk6">本文转载于:</h3><h3 id="tid-SwZPdd">https://juejin.cn/post/7246609845272395837</h3><h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>                 <p style="color: #fff;">
关键词： 
</p>
                
                <ul class="con3_list">
					                      
                    <li>
                        <a href="http://news.qudong.cn/ydtx/2023/0620/40151.html"> <img src="http://img.9774.com.cn/2022/0923/20220923111909319.jpg" alt="天天快消息！记录--前端实现文件预览（pdf、excel、word、图片）">
                        </a>
                        <div>
                            <h4><a href="http://news.qudong.cn/ydtx/2023/0620/40151.html">天天快消息！记录--前端实现文件预览（pdf、excel、word、图片）</a></h4>
                            <p>这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助前端实</p>
                            <section>
                                <span>来源：</span>
                                <time>2023-06-20 </time>
                            </section>
                        </div>
    
                    </li>
					                      
                    <li>
                        <a href="http://news.qudong.cn/ydtx/2023/0620/40150.html"> <img src="http://img.inpai.com.cn/2022/0923/20220923110333789.jpg" alt="InnoDB 内存结构之更改缓冲区 环球新消息">
                        </a>
                        <div>
                            <h4><a href="http://news.qudong.cn/ydtx/2023/0620/40150.html">InnoDB 内存结构之更改缓冲区 环球新消息</a></h4>
                            <p>更改缓冲区（ChangeBuffer）是一种特殊的数据结构，用于缓存不在缓冲池</p>
                            <section>
                                <span>来源：</span>
                                <time>2023-06-20 </time>
                            </section>
                        </div>
    
                    </li>
					                      
                    <li>
                        <a href="http://news.qudong.cn/ydtx/2023/0620/40149.html"> <img src="http://hnimg.zgyouth.cc/2022/0610/20220610114939904.jpg" alt="Springboot web,三层架构, IOC&DI 使用总结2023 关注">
                        </a>
                        <div>
                            <h4><a href="http://news.qudong.cn/ydtx/2023/0620/40149.html">Springboot web,三层架构, IOC&DI 使用总结2023 关注</a></h4>
                            <p>Springbootweb,三层架构,IOC&amp;DI使用总结2023一 spring io全家桶springb</p>
                            <section>
                                <span>来源：</span>
                                <time>2023-06-20 </time>
                            </section>
                        </div>
    
                    </li>
					                      
                    <li>
                        <a href="http://news.qudong.cn/ydtx/2023/0620/40148.html"> <img src="http://img.rexun.cn/2022/0610/20220610101215872.jpg" alt="快讯 ｜ ShowMeBug入选人力资源智享会《TPG红宝书》 观热点">
                        </a>
                        <div>
                            <h4><a href="http://news.qudong.cn/ydtx/2023/0620/40148.html">快讯 ｜ ShowMeBug入选人力资源智享会《TPG红宝书》 观热点</a></h4>
                            <p>近日，ShowMeBug入选人力资源智享会《2022-2023&amp; 160;HR年度采购指南暨</p>
                            <section>
                                <span>来源：</span>
                                <time>2023-06-20 </time>
                            </section>
                        </div>
    
                    </li>
										
					
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40151.html">天天快消息！记录--前端实现文件预览（pdf、excel、word、图片）</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40150.html">InnoDB 内存结构之更改缓冲区 环球新消息</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40149.html">Springboot web,三层架构, IOC&DI 使用总结2023 关注</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40148.html">快讯 ｜ ShowMeBug入选人力资源智享会《TPG红宝书》 观热点</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40147.html">精彩看点：中消协出手：反对扫码强制关注公众号 全国范围可举报</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40146.html">学生自掏30万拍作品：因获三等奖嫌低拒绝领奖_热文</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40145.html">号称性能最强轻薄掌机：AYANEO预热新AMD 7840U处理器掌机_天天即时看</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40144.html">210元大额券：礼盒装红蜻蜓男士真皮自动皮带49元大促_环球新资讯</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40143.html">还买啥RTX 3060 英特尔A770 16GB显卡1779元</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40142.html">热推荐：史上最全Hadoop面试题：尼恩大数据面试宝典专题1</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40141.html">kafka的学习之一_带SASL鉴权的集群安装与启动</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/cj/2023/0620/40140.html">全球今日讯！债市日报：6月20日</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40139.html">科学家警告：用AI生成内容训练AI 几代内将产生“垃圾”</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40138.html">《暗黑破坏神4》官方晒自定义RTX4080显卡 莉莉丝雕塑逼真吗？</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40137.html">微头条丨毕业典礼上学生帽穗丢了：老师无实物拨穗</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40136.html">环球热门:高考后考生特种兵式出游有多拼？准大学生凌晨2点坐飞机五天游五城</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40135.html">采用模块化可拆卸设计：Fairphone 5手机承诺提供5年保修</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40134.html">Python工具箱系列(三十六) 全球资讯</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40133.html">华为云GaussDB为MetaERP“成本核算”产品“保驾护航” 天天观热点</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40132.html">【经验贴】多项目并行，如何解决资源管理这个难点？ 热闻</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/cj/2023/0620/40131.html">这里的工业为何跑出“加速度”？——福建宁德工业企业一线观察|每日焦点</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40130.html">世界观焦点：被曝脏乱粽子厂曾中标学校配餐项目 卫生脏乱粽子厂抽检曾发现问题</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40129.html">环球今日讯！高考生们看过来！“2023年高考网上咨询周”时间安排公布</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40128.html">当前视点！高速停车致三车追尾自己却溜了 驾驶员称跟自己没关系 被判全责</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40127.html">无毒无污染、更完美！长征六号火箭第11次成功发射|焦点速读</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40126.html">今日热文：手机为何不再使用可拆卸电池？原因揭开</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40125.html">天涯社区苦等“救命钱”！重启天涯宣布再开直播：筹款还是300万|快消息</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40124.html">LPR利率下调10个基点，如何影响你的房贷利率？ 播报</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40123.html">世界速讯：以梦为码 自主创新 | 华为云开发者日成都站圆满举行！</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40122.html">ElasticSearch安装与使用-每日视点</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40121.html">天天信息:全国铁路7月1日起实行新的列车运行图 客、货列车分别增加46列和394列</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/cj/2023/0620/40120.html">每日消息!中方在世贸组织提交贸易与环境政策相关提案</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40119.html">家居巨头宜家引入AI：下一代沙发将由人工智能设计</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40118.html">华硕Zenfone 10外观首曝：二代骁龙8小屏旗舰</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40117.html">地表最强RTX 4090！索泰RTX 4090 PGF显卡图赏 世界简讯</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40116.html">广州新规：快递入柜需收件人同意 虚假签收最高可罚三万！</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40115.html">天天信息:长虹发布全球首款多模态交互电视：不管说什么都能听懂</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40114.html">天天速读：南方强降雨频繁有致灾风险 北方高温明起再登场</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40113.html">微动态丨标准IO使用复习</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40112.html">视讯！ABAQUS 模拟过盈配合解决材料选择及公差带设计等问题</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40111.html">全球观察：maven 使用总结2023</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40110.html">人民银行合肥中心支行联合交易商协会举办债务融资工具业务培训|环球滚动</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/cj/2023/0620/40109.html">货币宽松抬升经济复苏放缓预期 日债收益率曲线延续趋陡-快讯</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40108.html">每日热闻!英亿万富翁探索泰坦尼克号残骸 现已失联超24小时！</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40107.html">售价超20万元 AMD最贵显卡MI300X诞生：192GB显存史无前例</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40106.html">今日聚焦!雷军武汉大学演讲：36年前教授这句话打通我任督二脉</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40105.html">一天两瓶喝不够：认养一头牛酸/纯奶30盒79.9元抄底（50元立减券）_今日热文</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40104.html">原装进口！雀巢黑咖啡官旗大促：券后每杯仅需0.6元|天天热点</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40103.html">最新快讯!新干县气象台发布雷电黄色预警信号【III级/较重】【2023-06-20】</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40102.html">Apache Superset 身份认证绕过漏洞（CVE-2023-27524）</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40101.html">关于IEnumerable和IQuerable之间的区别 全球通讯</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40100.html">java~二进制补码的用途|世界新消息</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40099.html">中国广电5G悲催的第一年：信号差 销户难</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40098.html">智能驾驶将进入大模型时代！理想发布通勤NOA内测视频 可自主学习</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40097.html">第一款ITX A620终于出现！最便宜的AMD迷你小板 热门</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40096.html">鸡蛋壳难剥是鸡蛋放的久了吗 为什么鸡蛋的壳很难剥 天天新动态</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40095.html">统信UOS系统开发笔记（五）：安装QtCreator开发IDE中的中文输入环境Fcitx输入法</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40093.html">强化学习从基础到进阶-常见问题和面试必知必答[2]：马尔科夫决策、贝尔曼方程、动态规划、策略价值迭代</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40092.html">Linux安装MongoDB 4.0.3</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40091.html">当前观点：C#12“实用”的新功能：类型的别名</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40090.html">聚焦廊坊经洽会 | 务实高效办会 彰显河北高水平开放新形象</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40089.html">天天快消息！带宽翻倍更能超！影驰HOF Classic D5-7000内存评测：超至7800MHz仍有余力</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40088.html">年轻人第一款奢侈品？《王者荣耀》联名宝格丽：首款数字珠宝皮肤来了</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40087.html">环球今日讯！比亚迪宋PLUS冠军版一惊喜变化：日系SUV崩溃倒计时开始！</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40086.html">i5/i7该选谁？差距大不大？i5-13490F、i7-13790F深度测试</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40085.html">6月19日老酒价格|飞天次新酒上涨 生肖节气下跌 十七大老酒市场价 当前视点</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40084.html">ChatGPT 初探 - 冰蓝老师 天天微头条</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40083.html">天天新资讯：线性结构中的栈、队列和串是怎么回事？</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40082.html">当前看点!如何将PCM格式的原始音频采样数据编码为MP3格式或AAC格式的音频文件？</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40081.html">全球头条：maven构建报错：Unable to load the mojo 'install' (or one of its required compone</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/cj/2023/0620/40080.html">每日聚焦：“降息”靴子落地！</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40079.html">环球观察：《庆余年2》又新增七位女角色，金晨出演叶灵儿</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40078.html">赛力斯SERES 5出海欧洲市场：德国不限速高速飙到225Km/h</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40077.html">颜值超高碾压一众国产！长安启源A07路试：上市就打比亚迪汉</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40076.html">宝马5系首获半自动驾驶认证：变道只需看眼后视镜|世界短讯</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40075.html">100元记3分！杭州对“加塞”司机开罚 网友：请全国推广 消息</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40074.html">广东荔枝价格跌至5年来最低：仅需3、4元一斤</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40073.html">街拍，游走在法律和道德边缘</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40072.html">CSS3有哪些新特性_全球最资讯</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40071.html">全球即时看！数据库三大范式（考试必备）</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40070.html">世界要闻：使用 JMX-Exporter 监控 Kafka 和 Zookeeper</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40069.html">A Practical Methodology, HSM, Handler,Service,Model, for Golang Backend Developm</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40068.html">【环球聚看点】直播源码搭建技术弹幕消息功能的实现</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40067.html">世界观热点：6月20日 11:03分  迈普医学（301033）股价快速拉升</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40066.html">日系还香吗？新一代本田皓影混动/插混上市：19.99万起要打比亚迪_世界报资讯</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40065.html">16.5亿打造！《封神三部曲》第一部7月20上映：预告片发布</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40064.html">全脂/低脂可选：特仑苏纯牛奶2.7元/盒大促（商超6元）</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40063.html">世界快看点丨微软明确不会涉足VR：市场实在太小</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40062.html">红魔8S Pro首发高频版骁龙8 Gen2！170万跑分比骁龙8 Gen3还猛 焦点速讯</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40061.html">【全球新要闻】对在建工程“全面体检”</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40060.html">全球新资讯：关于线性结构中的双向链表如何实现？</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40059.html">NCalc 学习笔记 （六）|天天观热点</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40058.html">也说一说IDEA热部署Web项目最终解决方案，确实大大提高工作效率</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0620/40057.html">每日视点！详解在 Linux 启动时，如何自动执行命令或脚本</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40056.html">最资讯丨失乐园电影迅雷下载 失乐园电影未删减版迅雷下载</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40055.html">债市相对更强，股市估值处相对低位-焦点速递</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40054.html">墓地无人汽车探测到“鬼影”！真相到底是什么？</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40053.html">上海双层敞篷观光巴士将永久退役：已达13年强制报废标准 后继无车</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40052.html">首创双枪充电遥遥领先！比亚迪腾势N7首批量产车下线</a></h4></li>
					                      
                    <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0620/40051.html">高考过后 多所知名大学校长纷纷出镜招生|全球短讯</a></h4></li>
										
					 </ul>
            </div>
        </div>
    </main>
    <footer>
		<p><a href="">如有意见请与我们联系 邮箱：29 59 11 57 8 @qq.com</a></p>
<p><a href="https://beian.miit.gov.cn/" target="_blank"> <span id="bah">豫ICP备20005723号-1</span></a>
<a href="http://112.74.60.84/yyzz.html" target="_blank"> <img src="http://112.74.60.84/police.jpg" style="height:15px;">营业执照公示信息</a></p>
<p>驱 动 网 版 权 所 有 ，未 经 书 面 授 权 禁 止 使 用</p>
<p>Copyright &copy; 1997-2021 by www.qudong.ctocio.com.cn. all rights reserved</p>    </footer>
    <button class="return btn btn-outline-secondary">返回顶部</button>
    <script>
        
        var retu = document.querySelector(".return");
        window.onscroll = function(){
            var t = document.documentElement.scrollTop || window.pageYOffset;
            if (t > 200) {
               retu.style.display = "block";
            } else {
               retu.style.display = "none";
            }
        }

        retu.onclick = function(){
            document.documentElement.scrollTop = 0;
            document.body.scrollTop = 0;
        }
    </script>
	<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?4a84ef7d39b9fa04168be859e70e8bd9";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</body>

</html>
最新要闻

手机

家电

天天快消息！记录--前端实现文件预览（pdf、excel、word、图片）

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

前端实现文件预览功能

图片预览
