当前位置：首页 > 文章列表 > 文章 > 前端 > HTML表格PDF预览实现与嵌入方法详解

HTML表格PDF预览实现与嵌入方法详解

2025-07-14 14:45:33 0浏览收藏

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《HTML表格PDF预览实现方法及嵌入方式解析》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

在HTML中实现PDF预览主要有三种方式：1.使用标签，简单直接，兼容性好但控制能力有限；2.使用<embed>或<object>标签，其中<object>支持备用内容提升用户体验，但跨浏览器表现可能不一致；3.使用JavaScript库（如PDF.js），提供高度定制化和功能丰富的预览体验，但实现复杂度较高。为确保最佳体验，应提供下载备用链接、优化文件大小，并注意安全问题，如仅嵌入可信来源的PDF以避免潜在风险。</p><p><img src="/uploads/20250714/17524755096874a775651cd.png" alt="HTML表格如何实现PDF预览？有哪些嵌入方式？"></p><p>在HTML中实现PDF预览，主要不是通过HTML表格本身，而是通过几种嵌入技术。最直接的方式是使用<code><iframe></code>标签，它能将PDF文件内嵌到网页中。此外，还可以利用<code><embed></code>或<code><object></code>标签，以及更现代的JavaScript库来提供更丰富的预览体验。每种方式都有其适用场景和一些需要注意的地方。</p><img src="/uploads/20250714/17524755096874a77597419.png" alt="HTML表格如何实现PDF预览？有哪些嵌入方式？"><p>要在HTML页面中展示PDF文件，让用户无需下载就能直接查看，有几种主流的方法。最常见也最直接的就是使用<code><iframe></code>标签。它就像在你的网页里开了一扇窗，窗里显示的是另一个页面的内容，或者在这里，是你的PDF文件。</p><pre class="brush:language-html;toolbar:false;"><iframe src="path/to/your/document.pdf" width="100%" height="600px" frameborder="0">

这里src指向你的PDF文件路径，width和height控制预览区域的大小，frameborder="0"则可以去除边框，让它看起来更自然。这种方式的优点是简单、兼容性好，大部分现代浏览器都内置了PDF阅读器，所以它能无缝工作。但缺点是，你对PDF的显示控制权很有限，比如不能自定义工具栏、不能直接添加批注等。

除了</code>，还有<code><embed></code>和<code><object></code>标签，它们在某种程度上也能实现类似的效果。</p><pre class="brush:language-html;toolbar:false;"><embed src="path/to/your/document.pdf" type="application/pdf" width="100%" height="600px" /></pre><pre class="brush:language-html;toolbar:false;"><object data="path/to/your/document.pdf" type="application/pdf" width="100%" height="600px"> <p>您的浏览器不支持PDF预览。请<a href="path/to/your/document.pdf">点击此处下载PDF文件</a>。</p> </object></pre><p><code><embed></code>和<code><iframe></code>类似，通常也能触发浏览器内置的PDF阅读器。<code><object></code>则更通用，可以嵌入各种媒体类型，并且它有一个备用内容区域，当浏览器不支持嵌入类型时，可以显示替代内容，这在用户体验上是个不错的细节。不过，它们的兼容性和行为在不同浏览器之间可能存在细微差异，有时候表现不如<code><iframe></code>稳定。</p><img src="/uploads/20250714/17524755106874a77601914.png" alt="HTML表格如何实现PDF预览？有哪些嵌入方式？"><p>对于需要更高级功能，比如自定义PDF工具栏、搜索、标注、甚至是在客户端进行PDF渲染（而不是依赖浏览器内置阅读器）的场景，纯HTML标签就显得力不从心了。这时，JavaScript库就成了首选。比如PDF.js，这是Mozilla开发的一个强大的JavaScript库，它能在浏览器端渲染PDF，完全脱离浏览器内置阅读器。使用PDF.js通常需要引入其库文件，然后通过JavaScript代码来指定要渲染的PDF文件和渲染到的HTML元素。这会涉及一些前端开发的工作，比如：</p><ol><li>引入PDF.js的viewer.html和相关JS/CSS文件。</li><li>在一个<code><iframe></code>中加载viewer.html，并传递PDF文件URL作为参数。或者更直接地，通过其API在Canvas上渲染PDF页面。这种方式的灵活性和可控性是最高的，但实现起来也相对复杂。</li></ol><p>总的来说，如果你只是想简单地让PDF显示在页面上，<code><iframe></code>是首选。如果需要更多控制或更一致的跨浏览器体验，JavaScript库是值得投入的。</p><h3>浏览器对PDF嵌入的支持度如何？如何确保用户获得最佳预览体验？</h3><p>浏览器对PDF嵌入的支持度，这确实是个老生常谈的话题，但也是最容易让人头疼的地方。坦白说，没有一个完美的、在所有浏览器和所有设备上都表现一致的解决方案。</p><p>大多数现代桌面浏览器，比如Chrome、Firefox、Edge，都内置了相当不错的PDF阅读器。当你使用<code><iframe></code>或<code><embed></code>标签指向一个PDF文件时，它们通常能很好地识别并渲染出来。用户可以直接在网页内部滚动、缩放，甚至打印。这省去了用户下载PDF再用外部软件打开的麻烦，体验上是顺滑的。</p><p>但问题来了，移动端浏览器呢？iOS的Safari和Chrome在处理PDF时通常也会尝试在浏览器内预览，但体验可能不如桌面端流畅，有时可能会直接提示下载。Android设备上的浏览器情况更复杂，有些能内嵌，有些则可能直接下载。</p><p>更深一层，即便是支持内嵌的浏览器，其内置阅读器的功能也是有限的。它们通常只提供基本的阅读功能，比如翻页、缩放。如果你期望用户能进行批注、高亮、填写表单等高级操作，内置阅读器是无法满足的。而且，不同浏览器内置阅读器的UI和操作逻辑可能不同，这导致了用户体验的不一致性。</p><p>那么，如何确保用户获得最佳预览体验呢？提供一个明确的“备用方案”至关重要。无论你选择哪种嵌入方式，都应该在PDF无法预览时，给用户一个明确的下载链接。就像前面<code><object></code>标签的例子，或者在<code><iframe></code>的外部提示。</p><pre class="brush:language-html;toolbar:false;"><iframe src="path/to/your/document.pdf" width="100%" height="600px" frameborder="0"> <p>您的浏览器不支持PDF预览。请<a href="path/to/your/document.pdf" target="_blank">点击此处下载PDF文件</a>。</p>

虽然</code>内部的内容在多数情况下会被忽略，但这种提示仍然有其价值，或者可以在<code><iframe></code>加载失败时通过JavaScript来动态显示下载提示。</p><p>对于对预览功能有高要求的场景，比如需要自定义UI、支持高级交互，或者需要确保跨浏览器体验高度一致时，投入使用像PDF.js这样的JavaScript库是很有必要的。虽然开发成本会增加，但它能让你完全掌控PDF的渲染和交互逻辑，提供一个统一且功能丰富的用户界面。这就像你不再依赖别人提供的阅读器，而是自己造了一个，当然就能随心所欲地定制了。</p><p>考虑PDF文件本身的大小。如果PDF文件过大，即使能内嵌预览，加载时间过长也会严重影响用户体验。在这种情况下，可以考虑对PDF进行优化，或者在预览前提供文件大小提示，让用户有个心理预期。</p><h3>嵌入PDF文件时需要注意哪些安全问题？如何避免潜在的风险？</h3><p>谈到在网页中嵌入外部内容，安全性永远是绕不开的话题，PDF也不例外。虽然PDF文件本身在大多数情况下是静态的，但如果来源不可信，或者处理不当，仍然可能带来一些潜在的风险。</p><p>一个主要的安全考量是“内容来源”。如果你嵌入的PDF文件来自一个不安全的、未经验证的外部网站，那么你实际上是在你的页面上打开了一个潜在的“后门”。虽然现代浏览器有沙盒机制来隔离<code><iframe></code>中的内容，但这并非万无一失。恶意的PDF文件理论上可能尝试利用浏览器或PDF阅读器的漏洞。因此，最佳实践是只嵌入来自你完全信任的源的PDF文件，最好是托管在你自己的服务器上。</p><p>另一个常见的挑战是“跨域问题”。当你的网页尝试加载不同域名下的PDF文件时，浏览器可能会因为同源策略（Same-Origin Policy</p><p>文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML表格PDF预览实现与嵌入方法详解》文章吧，也可关注golang学习网公众号了解相关技术文章。</p> </div> <div class="labsList"> </div> <div class="cateBox"> <div class="cateItem"> <a href="/article/261484.html" title="USB设备识别问题及驱动解决方法" class="img_box"> <img src="/uploads/20250714/17524755296874a789b1062.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="USB设备识别问题及驱动解决方法">USB设备识别问题及驱动解决方法 </a> <dl> <dt class="lineOverflow"><a href="/article/261484.html" title="USB设备识别问题及驱动解决方法" class="aBlack">上一篇<i></i></a></dt> <dd class="lineTwoOverflow">USB设备识别问题及驱动解决方法</dd> </dl> </div> <div class="cateItem"> <a href="/article/261486.html" title="Laravel迁移外键错误解决教程" class="img_box"> <img src="/uploads/20250714/17524755336874a78d0cde1.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Laravel迁移外键错误解决教程"> </a> <dl> <dt class="lineOverflow"><a href="/article/261486.html" class="aBlack" title="Laravel迁移外键错误解决教程">下一篇<i></i></a></dt> <dd class="lineTwoOverflow">Laravel迁移外键错误解决教程</dd> </dl> </div> </div> </div> </div> <div class="leftContBox pt0"> <div class="pdl20"> <div class="contTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit">最新文章</div> </div> </div> <ul class="newArticleList"> <li> <div class="contBox"> <a href="/article/625197.html" class="img_box" title="前端 Worker terminate 后未完成消息怎么处理"> <img src="/uploads/20260908/1788840611-5de04251f0-95f90b07cc-worker-cooperative-cancel.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 Worker terminate 后未完成消息怎么处理"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  2小时前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/625197.html" class="aBlack" target="_blank" title="前端 Worker terminate 后未完成消息怎么处理">前端 Worker terminate 后未完成消息怎么处理</a> </dt> <dd class="cont2"> <span><i class="view"></i>199浏览</span> <span class="collectBtn user_collection" data-id="625197" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/625174.html" class="img_box" title="前端 Web Worker 传输对象后为什么主线程拿到的是副本"> <img src="/uploads/20260908/1788834858-30322a64db-d2fc0b3fbd-worker-clone-boundary.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 Web Worker 传输对象后为什么主线程拿到的是副本"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  4小时前  |   <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/861_new_0_1.html" class="aLightGray" title="性能">性能</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/40054_new_0_1.html" class="aLightGray" title="浏览器API">浏览器API</a> · <a href="/articletag/41028_new_0_1.html" class="aLightGray" title="Web Worker">Web Worker</a> · <a href="javascript:;" class="aLightGray" title="ArrayBuffer">ArrayBuffer</a> <a href="javascript:;" class="aLightGray" title="postMessage">postMessage</a> <a href="javascript:;" class="aLightGray" title="Web Worker">Web Worker</a> <a href="javascript:;" class="aLightGray" title="structured clone">structured clone</a> <a href="javascript:;" class="aLightGray" title="transfer list">transfer list</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/625174.html" class="aBlack" target="_blank" title="前端 Web Worker 传输对象后为什么主线程拿到的是副本">前端 Web Worker 传输对象后为什么主线程拿到的是副本</a> </dt> <dd class="cont2"> <span><i class="view"></i>290浏览</span> <span class="collectBtn user_collection" data-id="625174" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/625150.html" class="img_box" title="前端 Service Worker fetch 拦截如何绕过不该缓存的请求"> <img src="/uploads/20260908/1788830344-e9ec56ac7b-44c9863f05-sw-cache-network-contract.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 Service Worker fetch 拦截如何绕过不该缓存的请求"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  5小时前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/625150.html" class="aBlack" target="_blank" title="前端 Service Worker fetch 拦截如何绕过不该缓存的请求">前端 Service Worker fetch 拦截如何绕过不该缓存的请求</a> </dt> <dd class="cont2"> <span><i class="view"></i>418浏览</span> <span class="collectBtn user_collection" data-id="625150" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/625126.html" class="img_box" title="前端 Service Worker 的 skipWaiting 和 clientsClaim 怎么安排版本切换"> <img src="/uploads/20260908/1788826056-08042f6b8b-1b7e6c2476-sw-cache-compatibility-boundary.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 Service Worker 的 skipWaiting 和 clientsClaim 怎么安排版本切换"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  6小时前  |   <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/10234_new_0_1.html" class="aLightGray" title="pwa">pwa</a> · <a href="/articletag/14884_new_0_1.html" class="aLightGray" title="Service Worker">Service Worker</a> · <a href="/articletag/42691_new_0_1.html" class="aLightGray" title="缓存更新">缓存更新</a> · <a href="javascript:;" class="aLightGray" title="Service Worker">Service Worker</a> <a href="javascript:;" class="aLightGray" title="skipWaiting">skipWaiting</a> <a href="javascript:;" class="aLightGray" title="clientsClaim">clientsClaim</a> <a href="javascript:;" class="aLightGray" title="缓存版本">缓存版本</a> <a href="javascript:;" class="aLightGray" title="前端缓存更新">前端缓存更新</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/625126.html" class="aBlack" target="_blank" title="前端 Service Worker 的 skipWaiting 和 clientsClaim 怎么安排版本切换">前端 Service Worker 的 skipWaiting 和 clientsClaim 怎么安排版本切换</a> </dt> <dd class="cont2"> <span><i class="view"></i>410浏览</span> <span class="collectBtn user_collection" data-id="625126" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/625102.html" class="img_box" title="前端 createObjectURL 预览文件后什么时候 revoke"> <img src="/uploads/20260908/1788821646-70ba550488-dc0ad1d349-object-url-create-and-consumers.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 createObjectURL 预览文件后什么时候 revoke"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  7小时前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/625102.html" class="aBlack" target="_blank" title="前端 createObjectURL 预览文件后什么时候 revoke">前端 createObjectURL 预览文件后什么时候 revoke</a> </dt> <dd class="cont2"> <span><i class="view"></i>422浏览</span> <span class="collectBtn user_collection" data-id="625102" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/625078.html" class="img_box" title="前端 Blob.slice 上传分片时怎么计算最后一片长度"> <img src="/uploads/20260908/1788817532-a3c21e6603-0a064701a5-blob-slice-boundary.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 Blob.slice 上传分片时怎么计算最后一片长度"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  8小时前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/625078.html" class="aBlack" target="_blank" title="前端 Blob.slice 上传分片时怎么计算最后一片长度">前端 Blob.slice 上传分片时怎么计算最后一片长度</a> </dt> <dd class="cont2"> <span><i class="view"></i>432浏览</span> <span class="collectBtn user_collection" data-id="625078" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/625055.html" class="img_box" title="前端 IndexedDB 事务自动提交前为什么不能异步等待"> <img src="/uploads/20260908/1788813299-707db1df60-6d3346e9c6-idb-transaction-event-loop.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 IndexedDB 事务自动提交前为什么不能异步等待"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  10小时前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/625055.html" class="aBlack" target="_blank" title="前端 IndexedDB 事务自动提交前为什么不能异步等待">前端 IndexedDB 事务自动提交前为什么不能异步等待</a> </dt> <dd class="cont2"> <span><i class="view"></i>398浏览</span> <span class="collectBtn user_collection" data-id="625055" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/625031.html" class="img_box" title="前端 IndexedDB 版本升级被阻塞时怎么提示旧页面关闭"> <img src="/uploads/20260908/1788808915-6d8404d99f-1c5829bc75-indexeddb-connection-events.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 IndexedDB 版本升级被阻塞时怎么提示旧页面关闭"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  11小时前  |   <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/40530_new_0_1.html" class="aLightGray" title="浏览器存储">浏览器存储</a> · <a href="/articletag/42941_new_0_1.html" class="aLightGray" title="IndexedDB">IndexedDB</a> · <a href="javascript:;" class="aLightGray" title="多标签页">多标签页</a> <a href="javascript:;" class="aLightGray" title="IndexedDB">IndexedDB</a> <a href="javascript:;" class="aLightGray" title="versionchange">versionchange</a> <a href="javascript:;" class="aLightGray" title="onblocked">onblocked</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/625031.html" class="aBlack" target="_blank" title="前端 IndexedDB 版本升级被阻塞时怎么提示旧页面关闭">前端 IndexedDB 版本升级被阻塞时怎么提示旧页面关闭</a> </dt> <dd class="cont2"> <span><i class="view"></i>383浏览</span> <span class="collectBtn user_collection" data-id="625031" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/625007.html" class="img_box" title="前端 ReadableStream 读取中断后怎么取消底层请求"> <img src="/uploads/20260908/1788804610-84d568a5d5-1c3d70d786-readable-cancel-boundary.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 ReadableStream 读取中断后怎么取消底层请求"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  12小时前  |   <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/40436_new_0_1.html" class="aLightGray" title="流式读取">流式读取</a> · <a href="javascript:;" class="aLightGray" title="Fetch">Fetch</a> <a href="javascript:;" class="aLightGray" title="AbortController">AbortController</a> <a href="javascript:;" class="aLightGray" title="ReadableStream">ReadableStream</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/625007.html" class="aBlack" target="_blank" title="前端 ReadableStream 读取中断后怎么取消底层请求">前端 ReadableStream 读取中断后怎么取消底层请求</a> </dt> <dd class="cont2"> <span><i class="view"></i>306浏览</span> <span class="collectBtn user_collection" data-id="625007" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/624983.html" class="img_box" title="前端 fetch 大文件时怎么用 ReadableStream 逐块处理"> <img src="/uploads/20260908/1788800292-47e8221bd5-0d1d6a40ef-fetch-readable-stream-data-path.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 fetch 大文件时怎么用 ReadableStream 逐块处理"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  13小时前  |   <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/40974_new_0_1.html" class="aLightGray" title="Fetch API">Fetch API</a> · <a href="javascript:;" class="aLightGray" title="Fetch">Fetch</a> <a href="javascript:;" class="aLightGray" title="AbortController">AbortController</a> <a href="javascript:;" class="aLightGray" title="ReadableStream">ReadableStream</a> <a href="javascript:;" class="aLightGray" title="TextDecoderStream">TextDecoderStream</a> <a href="javascript:;" class="aLightGray" title="大文件分块">大文件分块</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/624983.html" class="aBlack" target="_blank" title="前端 fetch 大文件时怎么用 ReadableStream 逐块处理">前端 fetch 大文件时怎么用 ReadableStream 逐块处理</a> </dt> <dd class="cont2"> <span><i class="view"></i>483浏览</span> <span class="collectBtn user_collection" data-id="624983" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/624958.html" class="img_box" title="前端 fetch 网络断开时怎么区分 CORS 和真正连接失败"> <img src="/uploads/20260907/1788796000-8ec565e092-d3d29fdd4a-cors-network-diagnosis.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 fetch 网络断开时怎么区分 CORS 和真正连接失败"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  14小时前  |   <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/4720_new_0_1.html" class="aLightGray" title="cors">cors</a> · <a href="/articletag/40005_new_0_1.html" class="aLightGray" title="网络请求">网络请求</a> · <a href="/articletag/40974_new_0_1.html" class="aLightGray" title="Fetch API">Fetch API</a> · <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="cors">cors</a> <a href="javascript:;" class="aLightGray" title="Fetch">Fetch</a> <a href="javascript:;" class="aLightGray" title="网络错误">网络错误</a> <a href="javascript:;" class="aLightGray" title="response.ok">response.ok</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/624958.html" class="aBlack" target="_blank" title="前端 fetch 网络断开时怎么区分 CORS 和真正连接失败">前端 fetch 网络断开时怎么区分 CORS 和真正连接失败</a> </dt> <dd class="cont2"> <span><i class="view"></i>424浏览</span> <span class="collectBtn user_collection" data-id="624958" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/624935.html" class="img_box" title="前端 fetch 收到 404 为什么不会自动进入 catch"> <img src="/uploads/20260907/1788791615-cab7c6a953-62173f7b8d-fetch-error-conversion.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 fetch 收到 404 为什么不会自动进入 catch"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  16小时前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/624935.html" class="aBlack" target="_blank" title="前端 fetch 收到 404 为什么不会自动进入 catch">前端 fetch 收到 404 为什么不会自动进入 catch</a> </dt> <dd class="cont2"> <span><i class="view"></i>299浏览</span> <span class="collectBtn user_collection" data-id="624935" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> </ul> </div> </div> <div class="mainRight">  <div class="rightContBox" style="margin-top: 0px;"> <div class="rightTit"> <a href="/courselist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">课程推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/course/9.html" class="img_box" target="_blank" title="前端进阶之JavaScript设计模式"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/9.html" target="_blank" class="aBlack" title="前端进阶之JavaScript设计模式">前端进阶之JavaScript设计模式</a></dt> <dd class="cont1 lineTwoOverflow"> 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。 </dd> <dd class="cont2">543次学习</dd> </dl> </li> <li> <a href="/course/2.html" class="img_box" target="_blank" title="GO语言核心编程课程"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/2.html" target="_blank" class="aBlack" title="GO语言核心编程课程">GO语言核心编程课程</a></dt> <dd class="cont1 lineTwoOverflow"> 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。 </dd> <dd class="cont2">516次学习</dd> </dl> </li> <li> <a href="/course/74.html" class="img_box" target="_blank" title="简单聊聊mysql8与网络通信"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/74.html" target="_blank" class="aBlack" title="简单聊聊mysql8与网络通信">简单聊聊mysql8与网络通信</a></dt> <dd class="cont1 lineTwoOverflow"> 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让 </dd> <dd class="cont2">500次学习</dd> </dl> </li> <li> <a href="/course/57.html" class="img_box" target="_blank" title="JavaScript正则表达式基础与实战"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/57.html" target="_blank" class="aBlack" title="JavaScript正则表达式基础与实战">JavaScript正则表达式基础与实战</a></dt> <dd class="cont1 lineTwoOverflow"> 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。 </dd> <dd class="cont2">487次学习</dd> </dl> </li> <li> <a href="/course/28.html" class="img_box" target="_blank" title="从零制作响应式网站—Grid布局"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/28.html" target="_blank" class="aBlack" title="从零制作响应式网站—Grid布局">从零制作响应式网站—Grid布局</a></dt> <dd class="cont1 lineTwoOverflow"> 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。 </dd> <dd class="cont2">485次学习</dd> </dl> </li> </ul> </div> <div class="rightContBox"> <div class="rightTit"> <a href="/ai.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">AI推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/ai/13899.html" target="_blank" title="H2O EvalGPT：开源LLM大模型评估与排行榜工具" class="img_box"> <img src="/uploads/20260908/17887986376a9ee6adaf3f5.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="H2O EvalGPT：开源LLM大模型评估与排行榜工具" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13899.html" class="aBlack" target="_blank" title="H2O EvalGPT">H2O EvalGPT</a></dt> <dd class="cont1 lineTwoOverflow"> H2O EvalGPT是H2O.ai推出的开源LLM评估平台，提供详细的大模型性能排行榜、行业特定基准测试及A/B测试功能，助您快速选择最适合项目的高性能大语言模型。 </dd> <dd class="cont2">26次使用</dd> </dl> </li> <li> <a href="/ai/13892.html" target="_blank" title="SuperCLUE中文大模型评测基准：功能、能力维度与应用指南" class="img_box"> <img src="/uploads/20260831/17881740316a955ecf5901d.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="SuperCLUE中文大模型评测基准：功能、能力维度与应用指南" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13892.html" class="aBlack" target="_blank" title="SuperCLUE">SuperCLUE</a></dt> <dd class="cont1 lineTwoOverflow"> SuperCLUE是权威的中文大语言模型综合评测基准，涵盖语言理解、知识应用、AI Agent智能体及安全性等12项核心能力。通过多轮对话与客观测试，定期发布榜单与技术报告，为模型研发、优化及行业选型提供科学依据。 </dd> <dd class="cont2">179次使用</dd> </dl> </li> <li> <a href="/ai/13891.html" target="_blank" title="C-Eval中文评测基准：大语言模型多学科能力评估指南" class="img_box"> <img src="/uploads/20260902/17883342316a97d09714cfd.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="C-Eval中文评测基准：大语言模型多学科能力评估指南" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13891.html" class="aBlack" target="_blank" title="C-Eval">C-Eval</a></dt> <dd class="cont1 lineTwoOverflow"> 深入了解C-Eval中文评估套件，涵盖52个学科与4级难度。本文详解其功能特点、Zero-shot/Few-shot使用方法及代码示例，助您全面评测LLM中文理解与泛化能力。 </dd> <dd class="cont2">116次使用</dd> </dl> </li> <li> <a href="/ai/13888.html" target="_blank" title="AI Prompt Library：免费AI提示词库，助力ChatGPT高效创作与营销" class="img_box"> <img src="/uploads/20260906/17886942316a9d4ed7bbf53.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="AI Prompt Library：免费AI提示词库，助力ChatGPT高效创作与营销" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13888.html" class="aBlack" target="_blank" title="AI Prompt Library">AI Prompt Library</a></dt> <dd class="cont1 lineTwoOverflow"> 探索AI Prompt Library免费资源库，涵盖营销、写作及多场景AI提示词。兼容ChatGPT、Claude等工具，一键复制优化输出，提升工作效率。 </dd> <dd class="cont2">41次使用</dd> </dl> </li> <li> <a href="/ai/13883.html" target="_blank" title="Generrated：DALL·E 2/3 AI绘画提示词灵感库与图像对比平台" class="img_box"> <img src="/uploads/20260908/17888004336a9eedb167dca.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Generrated：DALL·E 2/3 AI绘画提示词灵感库与图像对比平台" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13883.html" class="aBlack" target="_blank" title="Generrated">Generrated</a></dt> <dd class="cont1 lineTwoOverflow"> Generrated汇集9300+张DALL·E生成图像及对应提示词，支持查看完整图集、对比DALL·E 2与3版本差异，是AI绘图新手学习Prompt设计与获取创作灵感的实用工具。 </dd> <dd class="cont2">23次使用</dd> </dl> </li> </ul> </div>  <div class="rightContBox"> <div class="rightTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">相关文章</div> </div> <ul class="aboutArticleRList"> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/207000.html" class="aBlack" title="JavaScript函数定义及示例详解">JavaScript函数定义及示例详解</a></dt> <dd> <span class="left">2025-05-11</span> <span class="right">502浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/621422.html" class="aBlack" title="智能体安全引领产业升级——国内AI安全产品市场深度分析">智能体安全引领产业升级——国内AI安全产品市场深度分析</a></dt> <dd> <span class="left">2026-08-21</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/619053.html" class="aBlack" title="CSS变量简化按钮悬停效果技巧">CSS变量简化按钮悬停效果技巧</a></dt> <dd> <span class="left">2026-05-31</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/618916.html" class="aBlack" title="JavaScript符号类型详解与应用">JavaScript符号类型详解与应用</a></dt> <dd> <span class="left">2026-05-31</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/612539.html" class="aBlack" title="HTML剪贴板复制粘贴怎么用">HTML剪贴板复制粘贴怎么用</a></dt> <dd> <span class="left">2026-05-26</span> <span class="right">501浏览</span> </dd> </dl> </li> </ul> </div> </div> </div> <div class="footer"> <div class="footerIn"> <div class="footLeft"> <div class="linkBox"> <a href="/about/1.html" target="_blank" class="aBlack" title="关于我们">关于我们</a> <a href="/about/5.html" target="_blank" class="aBlack" title="免责声明">免责声明</a> <a href="#" class="aBlack" title="意见反馈">意见反馈</a> <a href="/about/2.html" class="aBlack" target="_blank" title="联系我们">联系我们</a> <a href="/send.html" class="aBlack" title="广告合作">内容提交</a> <a href="/manual/go/" target="_blank" class="aBlack" title="手册">手册</a> </div> <div class="footTip">Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！</div> <div class="shareBox"> <span><i class="qq"></i>技术交流群</span> </div> <div class="copyRight"> Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ <a href="https://beian.miit.gov.cn/" target="_blank" title="备案">湘ICP备19018815号-4</a> </div> </div> <div class="footRight"> <ul class="encodeList"> <li> <div class="encodeImg"> <img src="/assets/examples/qrcode_for_gh.jpg" alt="Golang学习网"> </div> <div class="tit">关注公众号</div> <div class="tip">Golang学习网</div> </li> <div class="clear"></div> </ul> </div> <div class="clear"></div> </div> </div>  <style> .popupBg .n-error{ color: red; } </style> <div class="popupBg"> <div class="loginBoxBox"> <div class="imgbg"> <img src="/assets/images/leftlogo.jpg" alt=""> </div>  <div class="loginInfo encodeLogin" style="display: none;"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.passwordLogin').show();"> <div class="tip">密码登录在这里</div> </div> <div class="encodeInfo"> <div class="tit"><i></i> 微信扫码登录或注册</div> <div class="encodeImg"> <span id="wx_login_qrcode"><img src="/assets/examples/code.png" alt="二维码"></span>  </div> <div class="tip">打开微信扫一扫，快速登录/注册</div> </div> <div class="beforeLoginTip">登录即同意 <a href="#" class="aBlue" title="用户协议">用户协议</a> 和 <a href="#" class="aBlue" title="隐私政策">隐私政策</a></div> </div>  <div class="loginInfo passwordLogin"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.encodeLogin').show();"> <div class="tip">微信登录更方便</div> </div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem loginFormLi curr">密码登录</li> <li class="selfTabItem registerFormBox ">注册账号</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont loginFormBox" style="display: block;"> <form name="form" id="login-form" class="form-vertical form" method="POST" action="/index/user/login"> <input type="hidden" name="url" value="//www.17golang.com/article/261485.html"/> <input type="hidden" name="__token__" value="7d9f8b7c8e8ca47a15b574f694912fa4" /> <div class="form-group" style="height:70px;"> <input class="form-control" id="account" type="text" name="account" value="" data-rule="required" placeholder="邮箱/用户名" autocomplete="off"> </div> <div class="form-group" style="height:70px;"> <input class="form-control" id="password" type="password" name="password" data-rule="required;password" placeholder="密码" autocomplete="off"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="other"> <a href="#" class="forgetPwd aGray" onclick="$('.loginInfo').hide();$('.passwordForget').show();" title="忘记密码">忘记密码</a> </div> <div class="loginBtn mt25"> <button type="submit">登录</button> </div> </form> </div> <div class="selfTabCont registerFormBox" style="display: none;"> <form name="form1" id="register-form" class="form-vertical form" method="POST" action="/index/user/register"> <input type="hidden" name="invite_user_id" value="0"/> <input type="hidden" name="url" value="//www.17golang.com/article/261485.html"/> <input type="hidden" name="__token__" value="7d9f8b7c8e8ca47a15b574f694912fa4" /> <div class="form-group" style="height:70px;"> <input type="text" name="email" id="email2" data-rule="required;email" class="form-control" placeholder="邮箱"> </div> <div class="form-group" style="height:70px;"> <input type="text" id="username" name="username" data-rule="required;username" class="form-control" placeholder="用户名必须3-30个字符"> </div> <div class="form-group" style="height:70px;"> <input type="password" id="password2" name="password" data-rule="required;password" class="form-control" placeholder="密码必须6-30个字符"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="loginBtn"> <button type="submit">注册</button> </div> </form> </div> </div> </div> <div class="beforeLoginTip">登录即同意 <a href="https://www.17golang.com/about/3.html" target="_blank" class="aBlue" title="用户协议">用户协议</a> 和 <a href="https://www.17golang.com/about/4.html" target="_blank" class="aBlue" title="隐私政策">隐私政策</a></div> </div>  <div class="loginInfo passwordForget"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="returnLogin cursorPointer" onclick="$('.passwordForget').hide();$('.passwordLogin').show();">返回登录</div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem">重置密码</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont"> <form id="resetpwd-form" class="form-horizontal form-layer nice-validator n-default n-bootstrap form" method="POST" action="/api/user/resetpwd.html" novalidate="novalidate"> <div style="height:70px;"> <input type="text" class="form-control" id="email" name="email" value="" placeholder="输入邮箱" aria-invalid="true"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <a href="javascript:;" class="btn btn-primary btn-captcha cursorPointer" style="background: #2080F8; border-radius: 4px; color: #fff; padding: 12px; position: absolute;" data-url="/api/ems/send.html" data-type="email" data-event="resetpwd">发送验证码</a> </span> </div> <input type="password" class="form-control" id="newpassword" name="newpassword" value="" placeholder="请输入6-18位密码"> <div class="loginBtn mt25"> <button type="submit">重置密码</button> </div> </form> </div> </div> </div> </div> </div> </div> <script src="/assets/js/juejin-theme.js?v=20260613b" defer></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e34c3e8ab31ba35d7e1c48ea8d77315f"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script src="/assets/js/frontend/common.js"></script> </body> </html>