jspdf简单使用
安装
npm install jspdf --save
英文输出
import jsPDF from 'jspdf-customfonts' let doc = new jsPDF()
doc.text('Hello world!', , )
doc.save('a4.pdf')
中文输出, 截图版
把中文做成图片,在插入到jspdf
//安装js截图包
cnpm install --save html2canvas import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
html2canvas(document.querySelector("#capture")).then(canvas => {
let doc = new jsPDF()
doc.text('您输入的300与正确值相差0~10%', , ) //文本
doc.text('Hello world!', , )
doc.text('Hello world!', , )
doc.addImage(canvas.toDataURL('image/jpeg'), 'JPEG', , , , ) doc.addFont('Dengb.ttf', 'NotoSansCJKjp', 'normal')
doc.setFont('NotoSansCJKjp')
doc.text(, , '您输入的300与正确值相差0~10%')
let paragraph = '您输入的300与正确值相差0~10%您输入的300与正确值相差0~10%您输入的300与正确值相差0~10%'
let lines = doc.splitTextToSize(paragraph, )
doc.text(, , lines)
doc.save('a4.pdf')
})
结果
中文输出,引入字体版
1.cnpm install jspdf-customfonts安装
2.本地找到上面安装的包的源代码
3.找到windows的字体文件,ttf格式的
4.拷贝到步骤2的fonts文件下
5.返回上层目录,打开cmd窗口,运行node makeFonts.js,将在dist目录下生成default_vfs.js
5.default_vfs.js内容大致如下
6.将文件对应文件拷到其他地方,然后引入
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="static/js/jspdf.customfonts.min.js"></script>
<script src="static/js/default_vfs.js"></script>
7.导入代码
let doc = new jsPDF()
doc.addFont('Dengb.ttf', 'NotoSansCJKjp', 'normal');
doc.setFont('NotoSansCJKjp');
doc.text('您输入的300与正确值相差0~10%', , ) //文本
doc.text('Hello world!', , )
doc.save('a4.pdf')
8.结果对比
jspdf简单使用的更多相关文章
- 分享一个 jsPDF的简单使用以及中文编码问题的解决
后台一个下载文件中内容国际化问题的坑甩到了前端 前端自己匹配,自己处理国际化,生成文件下载 jsPDF-AutoTable 挺靠谱 中文乱码, 还是好人多啊 解决方式如下文章 jsPDF的简单使 ...
- 赞!jsPDF – 基于 HTML5 的强大 PDF 生成工具
jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档.使用方法很简单,只要引入 jsPDF 库,然后调用内置的方法就可以了.浏览器兼容性: IE 10, Firefo ...
- html/jsp导出pdf格式的几种方法(jsPDF,iText,wkhtmltopdf)
在许多生成报表的时候需要我们后台作出动态的数据,并渲染到前端生成pdf格式,Excel格式的各种报表,但是浏览器自带的生成pdf功能,windows系统的ctrl+p键就能完全搞定这一需求,但对客户来 ...
- jsPDF – 基于 HTML5 的强大 PDF 生成工具
jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档. 使用方法很简单,只要引入 jsPDF 库,然后调用内置的方法就可以了. 米扑科技项目用到了HHTML5生成PD ...
- jsPDF生成pdf文件和中文编码
jsPDF的简单使用以及中文编码问题的解决 文中js通过CDN引入,若是为了加载时间最好下载至本地. jsPDF的使用 jsPDF简介 jsPDF 是一个基于 HTML5 的客户端解决方案,用于在客户 ...
- 纯前端html导出pdf--分页+不分页--html2canvas+jsPDF
前言 最近在项目中,有一个导出pdf功能,需要纯前端来实现,调研了多种pdf导出方式,最终决定使用html2canvas+jsPDF来实现需求. 本文就简单介绍一下html2canvas+jsPDF导 ...
- 【造轮子】打造一个简单的万能Excel读写工具
大家工作或者平时是不是经常遇到要读写一些简单格式的Excel? shit!~很蛋疼,因为之前吹牛,就搞了个这东西,还算是挺实用,和大家分享下. 厌烦了每次搞简单类型的Excel读写?不怕~来,喜欢流式 ...
- Fabio 安装和简单使用
Fabio(Go 语言):https://github.com/eBay/fabio Fabio 是一个快速.现代.zero-conf 负载均衡 HTTP(S) 路由器,用于部署 Consul 管理的 ...
- node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
随机推荐
- 「FJOI2016」神秘数 解题报告
「FJOI2016」神秘数 这题不sb,我挺sb的... 我连不带区间的都不会哇 考虑给你一个整数集,如何求这个神秘数 这有点像一个01背包,复杂度和值域有关.但是你发现01背包可以求出更多的东西,就 ...
- Apache动态加载模块
添加步骤:如要额外安装cgi,先找到mod_cgi.c及mod_cgid.c.一般在apache安装包目录下,如 ./httpd-2.2.25/modules/generators .#编译安装 cg ...
- 单片机的编程语言和开发环境 LET′S TRY“嵌入式编程”: 3 of 6
单片机的编程语言和开发环境 LET′S TRY“嵌入式编程”: 3 of 6 本连载讲解作为嵌入式系统开发技术人员所必需具备的基础知识.这些基础知识是硬件和软件技术人员都应该掌握的共通技术知识. 在“ ...
- 【SFA官方翻译】Spring WebFlux和Spring Cloud进行响应式微服务开发
源码,修正一些错误: https://github.com/bigben0123/sample-spring-cloud-webflux 原创 SpringForAll社区 2018-05-18 作者 ...
- spring boot集成ehcache 2.x 用于hibernate二级缓存
https://www.jianshu.com/p/87b2c309b776 本文将介绍如何在spring boot中集成ehcache作为hibernate的二级缓存.各个框架版本如下 spring ...
- js 获取 url 参数
/** * 根据页面地址获取所有参数对象 * @return Object{} 返回所有参数 * ------------------------------ * 根据页面地址获取指定参数对象 * @ ...
- [bzoj1692][队列变换]
题目链接 思路 首先肯定想到贪心,从队尾和队首取更小的那个. 但是如果遇到队尾和队首一样大的情况呢,总不能再挨个往前比较.所以就把整个字符串倒过来再挂到现在字符串的后面,也就是把当前字符串对称过去.然 ...
- MVC相关问题归纳
问题: 1.How MVC pattern flows 2.对象模型.关系模型 3.OR Framework 4.EF(Entity FrameWork)实体框架 5.模型驱动数据数据驱动模型的两种方 ...
- jQuery实现表格行的动态增加与删除(改进版)
之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...
- Linux之LVS 20180708
LVS负载均衡项目,是Linux开源项目中专门用于负载均衡的,主要应用在client访问server时,通过LVS来分配对应的server来响应client的请求.client访问时,都是访问的LVS ...