最近碰到个需求，需要把当前页面生成 pdf，并下载。...') 生成pdf需要把转化的元素添加到jsPDF实例中，也有添加html的功能，但某些元素无法生成在pdf中，因此可以使用html2canvas + jsPDF的方式将页面转成pdf。...通过html2canvas将遍历页面元素，并渲染生成canvas，然后将canvas图片格式添加到jsPDF实例，生成pdf。...来捋一下思路，将html页面内容生成canvas图片，通过 addImage将第一页图片添加到pdf中，超过一页内容，通过 addPage()添加pdf页数,然后再通过 addImage将下一页图片添加到...中的位置 虽然每一页pdf上显示的图片是相同的，但我们通过调整图片的位置，产生了分页的错觉。
同源 你可能跟我一样，网上搜索的大部分解决方案是给 a 标签添加 download 属性，但其实并非所有场景都适用。先来了解下 HTML5 a 标签的 downlaod 属性。...参考MDN，该属性表示让浏览器下载 URL 而不是导航到它。...，网站资源就是放在网站服务器上，源相同，所以加上 download 属性没毛病。...download='config.json'的属性，将优先使用请求头中配置的，即 imcute.json PDF 对于 pdf 文件，Chrome 和基于 Chromium 的 Edge 浏览器在设置中提供了一个是否始终外部打开的选项...打开浏览器设置，搜索 pdf： 引用 本节源码 浏览器的同源策略 a 标签 Content-Disposition
与其他 GitHub 项目不同，它的目标聚焦在 Chrome 上。 目标是为优秀的Chrome插件写一本中文说明书, 让 Chrome 插件英雄们造福人类。 ?...可以一键录制浏览器的单个标签页，录制完成后自动生成在线网页，进行视频播放， 可以下载刚刚录制的视频，也可以为刚刚生成的在线视频设置密码。...31、OneTab 把所有打开的标签页转换成一个列表，需要再次访问标签页时，点击列表恢复标签页。 32、Smallpdf 多份pdf在线合并，pdf在线编辑。...34、Astro Bot 刷题必备，打开新标签页时，展示一道与程序相关的问题或相关新闻。 35、Print Friendly & PDF ?...功能非常单一的小工具，帮你查看网页上的字体属性。 47、Go to Tab ? 形成一个下拉列表，帮你快速跳转到打开的网页 48、Words Discoverer ?
可直接使用 Chrome 内置更新程序升级或从 Chrome 官网下载。...使用标签预览更快地找到标签 可以将鼠标悬停在标签上并快速查看页面的缩略图预览。目前该功能在 Chrome beta 版本中。 ?...在 Chrome 中填写并保存 PDF 在接下来的几周内，用户将能够直接从 Chrome 填写 PDF 表单并将其与输入内容一起保存。如果再次打开文件，则可以从上次中断的地方继续。 ?...网址共享更轻松 改进了 Android 用户的 URL 共享，可快速复制链接，将其发送到其他设备上的 Chrome，以及通过其他应用程序发送链接。也可以打印页面或生成 QR 码以进行扫描或下载。...更新说明： https://blog.chromium.org/2020/08/chrome-just-got-faster-with-profile.html https://blog.google/
Infinity Pro Infinity Pro新标签页是一款基于html5的Chrome扩展程序，非常的优雅、漂亮。 ...Print Friendly & PDF Print Friendly & PDF 是一款网页打印或生成PDF的Chrome插件，他会在打印之前删除垃圾广告，导航和无用浮窗从而实现页面优化，比chrome...FeHelper(前端助手) FeHelper的功能包括JSON格式化、二维码生成与解码、信息编解码、代码压缩、美化、页面取色、Markdown与HTML互转、网页滚动截屏、正则表达式、时间转换工具、...但很多时候我们只需要某个开源仓库的某个文件就可以了 ，使用这个插件的话你只需要在GitHub网页上对这个文件夹双击，文件即可被下载，非常nice！...附录2：chrome地址栏命令 序号 命令 描述 1 chrome://accessibility 查看浏览器当前访问的标签 2 chrome://appcache-internals HTML5应用的离线存储管理
：下载安装"迅捷PDF编辑器" Step 2：创建PDF文件 Step 2：单击左侧的"页面"标签，选择与之对应的页面缩略图，然后从选项下拉菜单中选择"页面属性"命令 Step 3：在“页面属性..."对话框单击"动作"标签，再从"选择动作"下拉菜单中选择"运行JavaScript"命令，然后单击【添加】按钮，弹出JavaScript 编辑器对话框 Step 4：保存文档，之后使用浏览器打开...技巧拓展 我们可以把PDF文件嵌入到网页中并试运行 修复方法 作为网站管理员或开发者可以选择强迫浏览器下载PDF文件，而不是提供在线浏览等或修改Web服务器配置的header和相关属性，也可以使用第三方插件解析...pdf，不用chrome自带的pdf解析就行，https://github.com/adobe-type-tools/cmap-resources
扩展即可复制百度文库上的文字，后台有小伙伴问能不能下载百度文库，于是这里再做个整理。...打开下载的PDF没问题。 ? 再来下载豆丁文档 https://www.docin.com/p-513589737.html ，这个是Word格式。 ?...会同时下载 PDF和txt格式文件。 ? 豆丁文档也一样（其他网站就不一一测试了）。 ? ? 如果你使用的Mac系统，上面的Windows软件就没法用了，推荐下面的Chrome扩展和油猴脚本。...Chrome扩展 比如这个百度文库https://wenku.baidu.com/view/021014797dd184254b35eefdc8d376eeaeaa172f.html 剩余3页不能看。...点击导出文档会调用谷歌浏览器的另存为PDF，保存即可。 ? 如果想将下载后的 PDF 文档转换为 Word 文档格式推荐之前文章 良心整理：PDF工具合集分享的软件 pdfsharper ?
与其他GitHub项目不同，它的目标聚焦在Chrome上。 目标是为优秀的Chrome插件写一本中文说明书, 让Chrome插件英雄们造福人类。...7、Loom 可以一键录制浏览器的单个标签页，录制完成后自动生成在线网页，进行视频播放，可以下载刚刚录制的视频，也可以为刚刚生成的在线视频设置密码。...31、OneTab 把所有打开的标签页转换成一个列表，需要再次访问标签页时，点击列表恢复标签页。 32、Smallpdf 多份pdf在线合并，pdf在线编辑。...40、GitZip for github 从Github批量下载表情包。 ? 41、Copy All Urls 方便地保存-开启多个标签页。 42、在Edge中安装Chrome扩展程序 如题。...46、WhatFont 功能非常单一的小工具，帮你查看网页上的字体属性。
推荐指数：⭐⭐⭐⭐ 下载链接：https://www.chajianxw.com/product-tool/13516.html 标签管理 Momentum 新标签页 Momentum 新标签页 Chrome...推荐指数：⭐⭐⭐⭐ 下载链接：https://www.chajianxw.com/product-tool/21550.html Tab Manager Plus 标签管理器 Tab Manager...推荐指数：⭐⭐⭐⭐ 下载链接：https://www.chajianxw.com/product-tool/13304.html OneTab 标签页整理 OneTab 标签页整理 Chrome插件截图...另外，PDF 中也可以使用它。...插件截图2 简介：简单好用的新浪微博图床,支持选择/拖拽/粘贴上传图片,并生成图片地址,HTML,UBB和Markdown等格式,支持浏览和删除历史记录。
Octotree 树形展示 Github 项目代码，让你能像在GitHub上像你的IDE里一样浏览和搜索代码。 Top 7....One Tab 当您发现自己有太多的标签页时，单击OneTab图标，将所有标签页转换成一个列表。当您需要再次访问这些标签页时，可以单独或全部恢复它们。...当您的标签页位于OneTab列表时，您将节省高达95％的内存，因为你将减少Google Chrome浏览器中打开的标签页的数量。 Top 8....FeHelper(前端助手) 包括JSON格式化、二维码生成与解码、信息编解码、代码压缩、美化、页面取色、Markdown与HTML互转、网页滚动截屏、正则表达式、时间转换工具、编码规范检测、页面性能检测...、Ajax接口调试、密码生成器、JSON比对工具、网页编码设置、便签笔 ---- Top 17.
安装wkhtmltopdfWindows在Windows系统上，可以从wkhtmltopdf的官方网站（https://wkhtmltopdf.org/）下载可执行文件，并按照安装向导进行安装...，当用户访问该路由时，会将学习报告页面转换为PDF格式，并将生成的PDF文件提供给用户下载。...某些复杂的 CSS 属性、JavaScript 特性或者网页布局可能无法完全支持，导致最终生成的 PDF 出现问题。...不支持一些现代特性: wkhtmltopdf 的渲染引擎可能不支持某些现代的 CSS 属性、JavaScript 特性或者 HTML5 标签。...Puppeteer: Puppeteer 是一个基于 Chrome DevTools 协议的高级浏览器自动化控制库，可以用来生成 PDF。
推荐指数：⭐⭐⭐⭐ 下载链接：https://www.chajianxw.com/product-tool/21550.html Tab Manager Plus 标签管理器 简介：Chrome 最佳标签管理器插件...推荐指数：⭐⭐⭐⭐ 下载链接：https://www.chajianxw.com/product-tool/13304.html OneTab 标签页整理 简介：节省高达95％的内存，并减轻标签页混乱现象...另外，PDF 中也可以使用它。...推荐指数：⭐⭐⭐⭐⭐ 下载链接：https://www.chajianxw.com/product-tool/11479.html crxMouse Chrome™ 手势 简介：crxMouse Chrome...,并生成图片地址,HTML,UBB和Markdown等格式,支持浏览和删除历史记录。
全世界最多人在用的Chrome浏览器，今天更新了。 版本号：Chrome 85。 增加一系列标签管理功能，还自带PDF编辑器，并且提升10%网页加载速度。...新的UI为标签预览提供了一个更大的平铺界面，方便用户在使用触控屏时进行导航。 ? 这个功能首先在Chromebook上推出，今后也能在有触屏功能的笔记本上使用。...除了这些改进之外，谷歌还将把标签页预览功能添加进Chrome 。 当你把鼠标移到标签页上时，显示的是标签页中内容的缩略图，而不仅仅是网站名称。 ?...现在Chrome本尊也补全了类似功能。 直接在网页上编辑PDF文件 第二项提升用户使用体验的功能，是Chrome自带的PDF浏览和编辑器。 ?...对于不需要大量复杂编辑的PDF文件，无需下载，直接浏览器中就可以编辑保存。 关闭PDF页面的时候，Chrome会自动保存编辑痕迹，并且提供下载。
增加一系列标签管理功能，还自带PDF编辑器，并且提升10%网页加载速度。 最重要的，是安卓版Chrome首次支持64位系统，这么多年，终于等到了…… ?...新的UI为标签预览提供了一个更大的平铺界面，方便用户在使用触控屏时进行导航。 ? 这个功能首先在Chromebook上推出，今后也能在有触屏功能的笔记本上使用。...除了这些改进之外，谷歌还将把标签页预览功能添加进Chrome 。 当你把鼠标移到标签页上时，显示的是标签页中内容的缩略图，而不仅仅是网站名称。 ?...现在Chrome本尊也补全了类似功能。 直接在网页上编辑PDF文件 第二项提升用户使用体验的功能，是Chrome自带的PDF浏览和编辑器。 ?...对于不需要大量复杂编辑的PDF文件，无需下载，直接浏览器中就可以编辑保存。 关闭PDF页面的时候，Chrome会自动保存编辑痕迹，并且提供下载。
/force-download 这个文件头实现弹出下载。...今天在“闲逛”之余无意间发现 a 标签居然有个 download 属性！ 定义和用法 download 属性规定被下载的超链接目标。 在 a 标签中必须设置 href 属性。...该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。... 这下点击链接就能实现直接弹出下载了！ 要是到这里结束就好了，然而…… 只有 Firefox 和 Chrome 支持 download 属性。...所以要想实现全浏览器兼容还是得使用在服务器进行“中转”的办法 参考资料 HTML a download 属性 http://www.w3school.com.cn/tags/att_a_download.asp
为Chrome添加主页按钮(需要Root权限): https://mlapp.cn/83.html 2...."标签页列表"视图中，上划收起所有标签页，然后在顶部的标签页上上划五次即可使所有标签页视图上下旋转360º(严格来说这应该是一个彩蛋而不是一个特性) 6....当你想要放大网页中的图片却不想下载图片时，可以长按图片，选择"在新标签页中打开图片"，图片将会在新标签页中打开，切换到此标签页，即可缩放图片啦~ 12. 单手操作手机时放大/缩小页面时太痛苦？...Chrome甚至还可以将当前网页保存为PDF文档，当你遇到想要保存为PDF的网页时，只需要在Chrome的菜单中选择"分享 - 打印"，接着点击上方的下拉菜单，选择"保存为PDF即可将当前网页以PDF文档的形式保存到本地...，Chrome会在报错页显示一个"稍后下载此网页"的按钮，点击此按钮，Chrome会在后台尝试下载此网页，当网页下载完成后，将会给用户弹出通知。
download 属性介绍 常规的标签通过 href 实现链接跳转，如果只想下载文件而不是跳转预览，最好的方式是在标签中添加download属性，就能很简单地实现下载操作。...download是 HTML5 中标签新增的一个属性，此属性会强制触发下载操作，指示浏览器下载 URL 而不是导航到它，并提示用户将其保存为本地文件，例如： <a href="result.png...动态资源<em>下载</em> 面对一些动态内容<em>下载</em>的业务场景，即图片等资源的地址并不是固定的（例如一些在线绘图工具所<em>生成</em>的图片），只使用 <em>HTML</em> 无法满足需求。...注： <em>Chrome</em>65 之前是支持 download <em>属性</em>触发文件跨域<em>下载</em>的，之后则严格遵循同源策略，无法再通过 download <em>属性</em>触发跨域资源的<em>下载</em>。...解决方案 通过 Blob 和 Fetch 可以解决跨域和文件命名的问题：使用fetch获取跨域资源返回一个blob 对象并<em>生成</em>一个 Blob URL，配合<em>标签</em>的download<em>属性</em>触发<em>下载</em>，代码如下
引入文件下载 渲染引擎开始解析HTML/SVG/XHTML，并将标签转化为dom tree中的dom节点。接着，它解析外部CSS文件及style标签中的样式信息生成rule tree。...dom tree和rule tree结合生成render tree。 Render tree由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。...示例标签对应的DOM树 6. CSS下载解析 在html解析的过程中，遇到style标签会直接解析，而遇到link标签会去加载样式表。...Firefox在存在样式表还在加载和解析时阻塞所有的脚本，而chrome只在当脚本试图访问某些可能被未加载的样式表所影响的特定的样式属性时才阻塞这些脚本。...另外，display属性为none的元素也不会在渲染树中出现（visibility属性为hidden的元素将出现在渲染树中）。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
