在前端导出PDF,解决中文乱码一直是一个头疼的问题。要解决这个问题,需要将ttf等字体文件内容注册到页面PDF生成器中。但是之前网页是没有权限直接获取客户机器字体文件,这时就需要从服务器下载字体文件或者提示用户选择字体文件上传到页面。对于动辄数十兆(M)的中文字体文件,网络不好时并不是一个好的解决方案。

Chrome 103

提高页面性能的一种方法是对当前的使用资源经行提示。例如,预加载文件或连接到不同的服务器。

<link as="font" crossorigin="anonymous"
href="..." rel="preload">
<link as="font" crossorigin="anonymous"
href="..." rel="preload">
<link href="https://web-dev.imgix.net"
rel="preconnect">

但是在服务器发送页面内容之前,浏览器是无法对提示采取行动。

服务器需要几百毫秒才能生成一个请求页面,在浏览器开始接收页面内容之前,服务器是不进行任何处理的。但是在这个等待的过程中,服务器是需要一些固定子资源,例如 CSS 文件、JavaScript 和图像内容,这个时候服务器可以立即响应新的 HTTP 103 Early Hints 状态代码,并询问浏览器预加载那些子资源,以提供高座效率。

一旦服务器生成了页面,它就可以用正常的 HTTP 200 响应发送它。当页面进入时,浏览器已经开始加载所需的资源。作为一个新 HTTP 状态代码,所以它需要更新我们服务器。

本地字体访问

Web 上的字体一直是一个挑战,尤其是允许用户创建自己的图形和设计的应用程序就是一个难点。现在应用程序只能使用网络字体,但无法获得用户在其计算机上安装的字体列表;而且,无法访问完整的字体表数据,如果我们需要实现自己的自定义文本堆栈,就很复杂。

而在新版本中,这个问题得到了很好解决。Chrome 103版本中新的字体API可以让web应用获取到用户在本地电脑上安装的所有字体信息,同时还可以获取到字体内容。

调用window.queryLocalFonts(),会返回用户安装字体的数组。

const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
console.log(fontData.postscriptName);
console.log(fontData.fullName);
console.log(fontData.family);
console.log(fontData.style);
}

处于安全性的考虑,获取字体信息需要获取到用户的授权。当第一调用queryLocalFonts时,Chrome会弹出权限申请:

权限同意后,就可以获取所有安装字体的信息

使用navigator.permissions.query可以检查权限

async function requestPremission(){
const { state } = await navigator.permissions.query({
name: "local-fonts"
});
console.log(state)
if (state === 'granted') {
query();
} else if (state === 'prompt') {
alert("请授予权限!")
query();
}
else{
alert("没有权限获取字体")
}
}

使用本地字体导出PDF

接下来我们介绍如何使用本地字体进行PDF导出。

选择需要使用的字体内容,注册到PDF生成工具中

使用blob 方法可以获取字体文件内容

let currentFont = fontList[fontListSelect.value];

const blob = await currentFont.blob();

使用字体名称注册

//将Blob 对象转换成 ArrayBuffer
var reader = new FileReader();
reader.onload = function (e) {
var fontrrayBuffer = reader.result;
var fonts = GC.Spread.Sheets.PDF.PDFFontsManager.getFont(currentFont.family) || {};
fonts[fontType] = fontrrayBuffer;
GC.Spread.Sheets.PDF.PDFFontsManager.registerFont(currentFont.family, fonts);
}
reader.readAsArrayBuffer(blob);

接下来导出含有本地字体的PDF:

这里需要注意,使用本地字体风险也是不可避免的,如果用户没有安装对应字体,在网页中浏览器会使用其他字体进行渲染,倒是PDF依旧会有出现乱码的风险。解决方法是需要从服务器中下载目标字体或使用其他字体作为替代。

拓展阅读

React + Springboot + Quartz,从0实现Excel报表自动化

电子表格也能做购物车?简单三步就能实现

使用纯前端类Excel表格控件SpreadJS构建企业现金流量表

Chrome 103支持使用本地字体,纯前端导出PDF优化的更多相关文章

  1. 纯前端导出pdf文件

    纯前端js导出pdf,已经用于生产环境. 工具: 1.html2canvas,一种让html转换为图片的工具. 2.pdfmake或者jspdf ,一种生成.编辑pdf,并且导出pdf的工具. pdf ...

  2. 纯前端下载pdf链接文件,而不是打开预览的解决方案

    纯前端下载pdf链接文件,而不是打开预览的解决方案 一,介绍与需求 1.1,介绍 XMLHttpRequest 用于在后台与服务器交换数据.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行 ...

  3. vue 纯前端导出 excel 表格

    在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...

  4. 前端导出pdf

    html2canvas文档地址 http://html2canvas.hertzen.com/configuration 方式一:使用html2canvas和jspdf插件实现 该方式是通过html2 ...

  5. Vue 本地代理 纯前端技术解决跨域

    vue-axios获取数据很多小伙伴都会使用,但如果前后端分离且后台没设置跨域许可,那要怎样才能解决跨域问题? 常用方法有几种: 通过jsonp跨域 通过修改document.domain来跨子域 使 ...

  6. chrome 不支持12px以下字体为题的解决

    现英文9px 设置 在chrome 下无效,可以通过 -webkit-transform: scale(0.75); 12*0.75 =9  得到小字体(在chrome浏览器下 大小缩放到0.75倍) ...

  7. 使用javascript纯前端导出excel

    前言(感谢技术的分享者) 参考博客地址 github地址 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls.xlsx ...

  8. 纯前端导出Excel表格

    <html> <head> <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件 ...

  9. js前端导出excel

    此例子是利用html特性,纯前端导出excel,样式不好看,兼容主流浏览器. var tableid = jQuery(this).closest("div.tab-label-wrap&q ...

  10. 中文版Chrome浏览器不支持12px以下字体的解决方案

    中文版Chrome浏览器不支持12px以下字体的解决方案 Chrome 27之前的中文版桌面浏览器会默认设定页面的最小字号是12px,英文版则没有限制,主要是因为chrome认为汉字小于12px就会增 ...

随机推荐

  1. 基于 PyTorch 和神经网络给 GirlFriend 制作漫画风头像

    摘要:本文中我们介绍的 AnimeGAN 就是 GitHub 上一款爆火的二次元漫画风格迁移工具,可以实现快速的动画风格迁移. 本文分享自华为云社区<AnimeGANv2 照片动漫化:如何基于 ...

  2. Python数据科学手册-机器学习: 决策树与随机森林

    无参数 算法 随机森林 随机森林是一种集成方法,集成多个比较简单的评估器形成累计效果. 导入标准程序库 随机森林的诱因: 决策树 随机森林是建立在决策树 基础上 的集成学习器 建一颗决策树 二叉决策树 ...

  3. axos在async模式下如何中断请求

    main.js import axios from 'axios' Vue.prototype.$http = axios Test.vue <template> <div clas ...

  4. 深度剖析Istio共享代理新模式Ambient Mesh

    摘要:今年9月份,Istio社区宣布Ambient Mesh开源,由此引发国内外众多开发者的热烈讨论. 本文分享自华为云社区<深度剖析!Istio共享代理新模式Ambient Mesh>, ...

  5. Kibana: 运用Data Visualizer来分析CSV数据

  6. 详解centos7中配置keepalived日志为别的路径

    由于在默认状态下keepalived的日志会写入到/var/log/message中,我们需要将此剥离出来. 在centos 6下可以: (1)首先修改/etc/sysconfig/keepalive ...

  7. MySQL 安装(二进制版)

    MySQL 的安装方式一般分为三种,二进制版本.编译版本.RPM 包.比较常见的是二进制版本安装,方便简单,相对于编译安装,如果不是追求极致性能,使用起来差别不大.本次教程以二进制版本为例,系统为 c ...

  8. Fluentd直接传输日志给Elasticsearch

    官方文档地址:https://docs.fluentd.org/output/elasticsearch td-agent的v3.0.1版本以后自带包含out_elasticsearch插件,不用再安 ...

  9. redis监控规则

    其他说明参考host主机监控规则:https://www.cnblogs.com/sanduzxcvbnm/p/13589848.html groups: - name: Redis monitori ...

  10. SonarQube 的安装、配置及 Maven 项目的使用

    转载自:https://cloud.tencent.com/developer/article/1010612 1.SonarQube 介绍 SonarQube 是一个用于管理源代码质量开放平台,它可 ...