针对纯文本,可以支持目录/排版/表格/图片等
开始
如果一个字体是乱码,那这个工具是没法用的.
有个插件叫 jspdf + html2canvas,思路就是先把html转成canvas,再把canvas转成pdf. 但是这个pdf放大会失真原因就是canvas的位图.
如果不用转图片,直接html转pdf,那就只能是英文的,这里也有个插件叫jsPDF-CustomFonts-support,大概看需要坐标给汉字定位.同时也是需要二进制字体.
现在用 pdfmaker …的前端处理
到gayhub上下载代码
全局安装gulp,因为要用他生成
vfs_fonts.json
这个是字体的二进制文件.如果不想用官方的办法,也可以想办法生成二进制代码,按这个文件的格式组成.最后会成为一个20M左右的文件.
将ttf/ttc文件的字体放在example/fonts目录下,把别的删掉.然后在根目录下执行
npm i
gulp buildFonts // 具体看根目录下的gulpfile.js文件配置.
生成路径在 build
下.把目录下的pdfmaker.js
和vfs_fonts.js
复制到项目里备用.
- 在项目引入
pdfmaker.js
和vfs_fonts.js
后,代码重点是js
.
因为有大小字体颜色等因素,这玩意要一段一段的搞.
先覆盖一下默认字体
1 |
|
问题
tip:ttc 和 ttf是什么? ttc有多个字体,ttf有一个字体,可以理解成ttc包含多个ttf. 有个转换工具叫
TTCTOOLS
,应该是windows的.如何判断ttc里的ttf叫什么名字? 这里有一个可以将ttc转ttf的网站,只要把ttc文件上传,就可以分析出叫什么名字.
这里还有个问题,有些地方报错,大概是
找不到msyh.ttc
这样的,那么断点下padmaker.vfs是否加载,如果没加载就去vfs_fonts.js
里把this
去掉,没指进去.关于样式的函数,除了定义字体,例如
bold:true
外
| 解释| 举例
—-|—-|—-
font|单独定义字体|’msyh’
fontSize|字号|18
margin|外边距,数组|[0,0,0,10]
alignment|位置|left/right/center
color|字色|’black’
foreground|前景色|’red’
background|字背景色,可能是背景层水印等|’yellow’/在content之前赋值就可以.
lineHeight|行高|1
decoration|下划线/删除线/上划线|underline/lineThrough/overline
decorationColor|和decoration,给线配色|green
decorationStyle|和decoration,虚线/点/双线/波浪线|dashed/dotted/double/wavy
characterSpacing|字母间距|
image|图片|base64字符串/url
width|图宽|200
height|图高|100
fit|图片位置适应|[100,100]
toc|目录
tocItem|目录|true,id数组
numberStyle|目录页数样式|{bold:true}
pageSize|pdf成尺寸|’A4’/‘B5’/‘C5’/‘2A0’/‘RA3’/‘SRA2’/‘LETTER’/‘LEGAL’…
pageMargins|pdf外边框,数组|[40,60,40,60]
pageBreak|内容在上一页或者下一页|’before’/‘after’
pageOrientation|文档方向,横向/纵向|landscape/portrait
link|超链接|’http://xxx.com‘
linkToPage|页面跳转,跳转到第二页|2
noWrap|单元格不换行|true/false
preserveLeadingSpaces|段落|true
‘font’|
‘fontSize’|
‘bold’|
‘italics’|
‘alignment’|
‘color’|
‘columnGap’|
‘fillColor’|
‘decoration’|
‘decorationStyle’|
‘decorationColor’|
‘background’|
‘lineHeight’|
‘characterSpacing’|
‘noWrap’|
‘markerColor’|
‘leadingIndent’|
//‘tableCellPadding’|未实现
// ‘cellBorder’|未实现
// ‘headerCellBorder’|未实现
// ‘oddRowCellBorder’|未实现
// ‘evenRowCellBorder’|未实现
// ‘tableBorder’|未实现
- docDefinition可能出现的内容
| 解释
—-|—-
content|文档
header|
footer|页脚
background|背景文字
images|给content里的image图片类型指定图片
styles|给content里的style样式指定样式
lists|列表,ul/ol
pageSize|pdf大小
pageOrientation|pdf方向
pageMargins|pdf边框
info|pdf信息
compress|压缩pdf
table|表格
canvas|矢量图
- pdf 的信息
在docContent里加 info
1 | var docDefinition = { |
本来再想什么办法可以保证图片不失真,但是就这个vftfonts.js文件就放弃了,没人愿意下载20m的文件的,还是在后端处理吧.
nodejs插件html-pdf,不推荐
全局安装就可以直接使用,可以将本地的html文件转成pdf,不过..最后文件都在一个文件里.
sudo npm i -g html-pdf
html-pdf index.html abc.pdf
在项目中使用,用express来处理
sudo npm install express-generator -g
express htmltoapp // 项目名htmltoapp
cd htmlapp
npm i html-pdf --save
然后找个地方写代码.比如在routes/index.js里1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var express = require('express');
var router = express.Router();
var pdf = require('html-pdf');
router.get('/url',function(req,res){
res.render('html',function(err,html){
html2Pdf(html,'html.pdf');
//........
});
});
/**
* 这种方法没有渲染样式和图片
* @param url
* @param pdfName
*/
exports.html2Pdf = function(html,pdfName){
var options = {format:true};
pdf.create(html,options).toFile(__dirname+'/'+pdfName,function(err,res){
if (err) return console.log(err);
console.log(res);
});
};
会丢掉样式和图片
…这也没什么用.
nodejs插件wkhtmltopdf
也可以全局转换,安装比较麻烦,看官网,先装一个环境,然后就可以用命令操作了
wkhtmltopdf http://baidu.com/ out.pdf
再看代码
1 | var wkhtmltopdf = require('wkhtmltopdf'); |
可以了..github上有多语言的版本
nodejs插件 Phantomjs
这个根据node的不同分一堆版本,千万别弄混了
node版本6.X以上的:
npm install phantom –save
node版本5.X的:
npm install phantom@3 –save
node版本4.X及以下的:
npm install phantom@2 –save