首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Chrome 103支持使用本地字体,纯前端导出PDF优化

,浏览器是无法对提示采取行动。...本地字体访问 Web 的字体一直是一个挑战,尤其是允许用户创建自己的图形和设计的应用程序就是一个难点。...现在应用程序只能使用网络字体,但无法获得用户在其计算机上安装的字体列表;而且,无法访问完整的字体表数据,如果我们需要实现自己的自定义文本堆栈,就很复杂。 而在新版本中,这个问题得到了很好解决。...Chrome 103版本中新的字体API可以让web应用获取到用户本地电脑安装的所有字体信息,同时还可以获取到字体内容。...选择需要使用的字体内容,注册到PDF生成工具中 使用blob 方法可以获取字体文件内容 let currentFont = fontList[fontListSelect.value]; const

1K40
您找到你想要的搜索结果了吗?
是的
没有找到

用Node.js把HTML转成PDF格式

背景:几个月前,一个客户要求我们开发一个功能,用户可以得到 PDF 格式的 React 页面内容。该页面基本是患者病例的报告和数据可视化结果,其中包含许多 SVG。...其文档中写道: Puppeteer 是一个 Node 库,它提供了一个高级 API 来控制 DevTools 协议Chrome 或 Chromium。...Puppeteer 默认 headless 模式运行 Chrome 或 Chromium,但其也可以被配置为完整的(non-headless)模式运行。...如果你 Alpine 镜像安装 Puppeteer,请确保在看到页面的这一部分时再向下滚动一点。...但是跨浏览器兼容性方面,它的表现如何呢? 选择 CSS 打印规则时,你必须在每个浏览器中测试结果,确保它提供的布局是相同的,并且它不是100%能做到这一点。

6.3K30

前端使用 WebSocket 的四大注意事项(线上踩坑,含泪分享)

踩坑点我的《联机桌游合集》刚上线时,有个使用iOS的朋友告诉我,她无法进入游戏,重试了多次也不行。但是我已经用我手头的安卓、iPad、iPhone、Mac、Windows全都测试过一遍了。...解决如果你ws收到的数据都是二进制格式调用const ws = new WebSocket()后,立马设置ws.binaryType = 'arraybuffer'。...Chrome中,会触发多次onmessage事件,各个消息是被Chrome基于\n分割开了,分割后的消息按顺序依次触发onmessage来处理。...Safari中,只触发了一次onmessage事件,Safari没有帮我们分隔消息。事实WebSocket消息中,\n换行符本身就是区分消息的特殊符号。...因为Safari:如果你同时建立多个WebSocket连接,是同时发送ws连接请求的(当然注意ws同时连接数有上限,做压测时,一个Tab没必要一次性连太多,是没用的)。

1.8K30

内卷时代下的前端技术-使用JavaScript浏览器中生成PDF文档

3、无法满足实时打印预览或者PDF预览,这样直至打印前都无法确定打印的格式、范围等是否符合需求。...市面上主流的浏览器有三四家,例如Chrome、Safari、FireFox等,每个浏览器对于文字内容、CSS属性处理都不一致,有可能某些配置某个浏览器可行,换了一个浏览器之后就有可能天差地别。...最后,通过调用savePDF方法,将工作簿对象转为blob,我们可以通过window.open来进行pdf的预览或者通过一些保存文件的插件直接将这个blob保存为PDF文件。...没注册对应的字体之前,导出的中文字体和特殊字体都显示的是乱码。因此,还需要处理导出中文以及特殊字符PDF乱码的问题。 前面提到了注册字体,那我们的字体应该怎么来?要什么格式的字体呢?...首先,先确认我们的表单需要用到哪些字体,然后去找对应字体的ttf文件(电脑或者是一些字体网站上都有,需注意版权问题)。找到之后将其转为base64格式的文件。

2K20

你的浏览器,何必是浏览器

因为众所周知的原因,Google搜索引擎国内无法访问,我们设置页面里将搜索引擎更改成百度 搜狗 360 或者bing即可。...Octotree - GitHub code tree octotree 是一款chrome插件,用于将 Github 项目代码树形格式展示,方便查看各类文件,而且展示的列表中,我们可以下载指定的文件...多媒体浏览   谷歌浏览器Chrome不仅仅是最好用的浏览器,而且实际还是一个”多才多艺“的家伙。   你可以将各种JPG、PNG、MP4、AVI等常见媒体格式文件拖进浏览器进行预览!!!...网页输出PDF   有时我们需要将网页内容打印出来进行保存或发送给别人,这时候将网页输出成PDF格式再进行打印是一个很不错的选择。...3 chrome://apps 应用启动器,他可让您直接从桌面启动自己喜爱的应用 4 chrome://blob-internals 二进制大型物件(BLOB)储存 5 chrome://bluetooth-internals

2.7K11

安卓和ios之间文件互传_安卓转移到iphone12

转移完成之后,您可以从 app store 下载任何匹配的免费 app。 使用前准备事项: 1.通过苹果官网下载“转移到 ios”应用,并在安卓手机中进行安装。...5.如果您想要转移 chrome书签,请将安卓设备chrome 更新至最新版本。 6.需要确保两台设备放在一旁不动,直到转移完成。...例如,安卓设备,“转移到 ios”app 应全程显示屏幕。如果您在转移完成之前安卓设备使用另一个 app 或接到电话,您的内容将无法完成转移。...如果您不想抹掉 ios 设备的数据,请手动转移内容。 2.安卓设备打开“转移到 ios”app:打开后点击“继续”,轻点“同意”继续,然后轻点“查找代码”屏幕右上角的“下一步”。...3. ios 设备,轻点“从安卓设备转移数据”屏幕的“继续”。然后等待十位或六位数字的代码出现。如果安卓设备显示您的互联网连接信号弱的警告,您可以忽略这条警告。 4.安卓设备输入代码。

1.6K10

前端生成PDF,让后端刮目相看

PDF 简介 PDF 全称Portable Document Format (PDF)(便携文档格式),该格式的显示与操作系统、分辨率、设备等因素没有关系,不论是Windows,Unix还是苹果公司的...Adobe公司1993年为了文档传输创造了这个文件格式,这个格式使用PostScript页面描述语言,适用于列印图像和文字(无论是纸、胶片或非物质的CRT都可)。PDF是基于页面描述语言。...它存在的目的是为了实现批量精准的印刷,保证多个屏幕,多个系统,多终端中文件格式都能保存相对位置,展示布局都不会出现格式错乱,保证了打印到纸张格式完全一致,而不会内容格式面目而非。...因为将网页保存为PDF 让用户预览或下载不失为一种保证格式各终端一致的好方法。...每个浏览器对于文字内容,甚至CSS 属性处理都不一致,而正因为各家有各家的标准,会出现我们Chrome中可以正常使用所有功能,而火狐使用PDF时,内容无法正常显示,但打印功能正常。 分辨率。

2.9K30

让浏览器下载文件的一些手段

FireFox 浏览器下调用该方法如果不将创建的标签添加到 body 里,点击链接不会有任何反应,无法触发下载,而在 Chrome 浏览器中则不受此影响。...注: Chrome65 之前是支持 download 属性触发文件跨域下载的,之后则严格遵循同源策略,无法再通过 download 属性触发跨域资源的下载。... Chrome 的早期版本不仅支持跨域资源的download属性下载,而且还可以通过download重置跨域资源的文件名,因此才会出现上述这种情况。...File 接口也是基于 Blob,继承了 Blob 的功能并将其扩展使其支持用户系统的文件。...因此 Blob URL 并不能指向一个服务器资源,你无法在其它页面中打开它。同时由于编码格式有所差别,Blob URL 比起 Data URLs 所占的空间资源更少,性能也更好。

9.1K20

你不知道的 Blob

其中 size 属性用于表示数据的大小(字节为单位),type 是 MIME 类型的字符串。Blob 表示的不一定是 JavaScript 原生格式的数据。...); }); 示例中,我们通过调用 Blob 的构造函数来创建类型为 “text/plain” 的 Blob 对象,然后通过动态创建 a 标签来实现文件的下载。...文档 PDF(便携式文件格式,Portable Document Format)是由 Adobe Systems 1993 年用于文件交换所发展出的文件格式。...,我们首先创建 PDF 文档对象,然后调用该对象的 text() 方法指定的坐标点添加 Hello semlinker!...你不能直接操纵 ArrayBuffer 的内容,而是需要创建一个类型化数组对象或 DataView 对象,该对象特定格式表示缓冲区,并使用该对象读取和写入缓冲区的内容。

4K20

如何打造本地知识库——那些与Chat Pdf相关的几款开源热门跑车级应用

可使用langchain与其他AI模块整合,详见项目:Flowise——通过拖放界面构建定制的LLM流程•ChatGPT-pdf:这是一个Chrome扩展,用于将您的ChatGPT历史记录下载为PNG,.../liady/ChatGPT-pdf 介绍 ChatGPT 导出和分享 这是一个Chrome扩展,用于将您的ChatGPT历史记录下载为PNG,PDF或创建可分享的链接。...这将增加将其导出为图片,PDF文件或创建可分享链接的功能。 如何安装 安装到Chrome/Edge •从发布页面的最新版本中下载chrome-chatgpt-share.zip。...•解压下载的文件提取扩展文件。•Chrome/Edge中转到扩展页面(chrome://extensions 或 edge://extensions)。...如何使用 与ChatGPT聊天后,你会在页面底部(“Try Again”旁边)注意到新的按钮: 页面底部寻找它们: 点击它们可以生成PNG,下载PDF或创建整个聊天的HTML: 路线图 •支持

3.3K40

除了 Chrome,这些浏览器你也值得拥有!

Chrome 是如今功能最强大的浏览器, 2024 年的浏览器市场份额占有率统计中,Chrome 占了 64.5% ,相信大家平时用的最多的浏览器也是 Chrome 。...这个数据可以同步到 iOS 和 Android 的应用版本中,保持一致的用户体验,而且和 Windows Timeline 是兼容的。...Documents 之所以成为任何 iOS 用户必须下载的应用,是因为它能从网页上下载其他 iOS 浏览器应用程序会屏蔽的文件。Documents 是下载视频文件和其他媒体的理想应用。...优点 允许通常在 iOS 被阻止的文件 管理本地和云文件 支持 PDF 和 ZIP 文件 缺点 用户界面可能会令人困惑 较旧的 iPhone 和 iPad 机型运行速度可能会很慢 最多样化的浏览器...Chrome 的一个最大优点是它可以多种平台上使用,因为你可以不同的设备同步你的浏览历史和其他数据。你所需要做的只是登录你的 Google 账号。

39510

10 个 GitHub 最火的程序员简历项目,2021 金三银四必备!

熟悉前端性能的优化,熟悉使用 Chrome,Safari 等前端调试工具。 熟悉 Node.js 以及 V8 的性能和稳定性优化,能对系统整体性能进行评估,解决内存瓶颈。...是一个帮助你快速生成漂亮简历的工具,它基于 Vue 和 LESS,生成的简历可导出为 PDF 格式。...前端程序员模版,这个模版就是结合前面的几个简历模版,结合笔者自己的工作经验,写的简历,也就是笔者一年跳槽时的简历 ?,其中部分内容做了处理。...其中装的 VsCode 插件是 markdown-all-in-one 和 markdown-pdf,支持预览 md 文件以及导入各种格式的 md 文件。...支持导出的格式: markdown-pdf: Export (settings.json) markdown-pdf: Export (pdf) markdown-pdf: Export (html)

6.6K11

CSS3魔法堂:认识@font-face和Font Icon

TrueType格式(.ttf)   Windows和Mac常见的字体格式,是一种原始格式,因此它并没有为网页进行优化处理。  ...浏览器支持:IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+ OpenType格式(.otf)  TrueType...  浏览器支持:FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+ Web Open Font格式(.woff...file uri scheme的情况下(file:///),由于FireFox默认的file uri origin策略十分严格,不同路径等级则无法访问。所以相对路径被视为跨域操作,因此字库加载失败。...七、自定义Font Icon                         由于使用既定的Web字体库需要将整个字体库都下载下来,而实际用到的Font Icon则只有数个而已,因此通过自定义Font

2K80

记录工作中遇到的各种问题(Bug,总结,记录)

iPad下,无法实现自动聚焦 这问题应该是解决不了的,是iOS自带的,方案只能是由用户触发mousedown、mouseup、click之类的事件后再调用 ? 8....12. iOS高版本中,微信内访问网页,音频背景音乐无法自动播放 其实在高版本浏览器中,基于安全措施,已经不允许自动播放音频了,但在微信内是可以的 微信安卓环境下正常,但在高版本的iOS下就失效了,解决办法是微信的...有时已经开启了Gzip压缩,但从timeline看似乎是全量下载了,且看 ?..." type="application/pdf" /> Mac的safari是能嵌入的,不过iPhone或iPad下失效,但是能直接通过链接打开,所以解决办法是通过嵌入pdf文件的地址...iPhone或iPad的safari浏览器通过嵌入pdf来预览时,只能看到第一页,无法滚动翻页查看更多 这个问题是ios自家的bug了,所以为了解决,只能引入第三方支持(不再使用浏览器自身支持的

17.8K12

快速保存某个网页或者文档,几种方法教你做到,FireShot 捕捉网页截图插件!

背景简介: 很多童鞋有时候浏览到好的文档或者资料想要下载下来,但是这个又无法下载,可能聪明的童鞋就想到了截图插件以及软件来辅助下载下来。今天号主就给大家介绍几个方法!...内容简介: 方法一:fireshot插件 捕捉网页截图,编辑并将它们保存为PDF,JPEG,GIF,PNG或BMP;上传,打印,Photoshop中打开,复制到剪贴板或电子邮件 FireShot的抓住了...Chrome浏览器的网页截图。...最好的免费谷歌Chrome扩展!...其方便的浮动工具条和便捷的快捷键堪称完美结合,截图后的保存选项也特别丰富和方便,同时支持图片转换为PDF文件,满足各种需要。

3.1K10

简书markdown编辑器_最好的视频编辑器

用户可以使用诸如 * # 等简单的标记符号最小的输入代价生成极富表现力的文档。   Markdown具有很多优点: 写作中添加简单符号即完成排版,所见即所得。让你专注于文字而不是排版。...格式转换方便,Markdown 的文本你可以轻松转换为 html、pdf等。...Chrome 插件 Marxico 中文名马克飞象,因为印象笔记不支持Markdown,而这款可以直接把文本存到印象笔记的编辑器对于重度印象笔记用户是个不错的选择。付费软件,可以免费试用。...Miu 一款模仿mou 的windows平台markdown编辑器,小众推荐,必属精品,官网无法打开,好在小众提供了百度云下载。...关于优劣,@温国兵 知乎的一个答案中有简单介绍,有兴趣的可以去看看。

2.7K20
领券