生成pdf phantomjs

注：原创文件，转载请注明出处

使用phantomjs生成还原度比较高的pdf文件，理论上生成word也可以，因需求没有做这块要求，功课留给大家去做了。

下载

https://phantomjs.org/download.html

根据需要选择对应版本下载使用

使用总结

担心有人等不及看下面内容，先贴出来总结，在贴代码，最后贴介绍

邮件模板可以用ftl格式来做， 使用这个类来封装import freemarker.template.Template;
############liunx下安装步骤：#################

1，解压，配置引用，安装字体防止图片汉字乱码
tar -jxvf phantomjs-2.1.1-liunx-x86.tar.bz2
mv phantomjs-2.1.1-liunx-x86  /usr/local/src/phantomjs
ln -sf /usr/local/src/phantomjs/bin/phantomjs /usr/local/bin/phantomjs
yum install fontconfig freetype2
phantomjs -v #测试版本号

2，配置环境变量
vim /etc/profile
export PATH=${PATH}:/usr/local/src/phantomjs/bin/

记得刷新环境变量，生效

3，在liunx服务器的任意文件目录下输入命令： phantomjs, 正常输出，则配置成功，ctrl+c退出

###############window下使用：################

1， 解压zip包，
2，不是全局用的话，直接在bin目录搜索栏输入cmd打开即可， 不用配置环境变量
3，命令： 共四段，第一，二段不用改；第三段为自己的index.html文件路径，也即要生成pdf的html文件路径；第四段为输出文件路径
在bin目录下： phantomjs htmlToPdf.js "file:///D://temp//index.html" "D://temp/outpdf.pdf"
注： 路径file:///  和全路径中要用"//"来加载而不是"\\"

用到的文件名：
index.html ##html原页面
htmlToPdf.js  ##将html转成pdf的关键js
outpdf.pdf  ##最终生成的pdf文件

#############echarts图片生成：###################

1， 生成的echarts图片需要放到pdf中，要分两步，

使用命令生成图片：
phantomjs echarts-convert.js -infile echarts-options.js -outfile echarts-demo.png -scale 0.01 -width 800

用到的文件名：
echarts-all.js
echarts-options.js  ##这个内容可以从echarts官网直接copy,实际在用的时候，可以自己生成该文件
jquery-3.2.1.min.js
echarts-demo.png   ##最终生成的图片

2，第一步先生成echart.png,  然后将图片路径放到index.html中，然后在去生成pdf

上目录

上代码

Html2pdfUtil.java

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;

/**
 * 转换html为pdf
 */
public class Html2pdfUtil {

    public static String parseHtml2Pdf(String url) throws IOException {
        System.out.println(url);
        Runtime rt = Runtime.getRuntime();
        Process p = rt.exec("/Users/a/Downloads/phantomjs2/bin/phantomjs /Users/a/Downloads/phantomjs2/bin/html2pdf.js "+url + "  D://tmp//outpdf.pdf");
        InputStream is = p.getInputStream();
        BufferedReader br = new BufferedReader(new InputStreamReader(is));
        StringBuffer sbf = new StringBuffer();
        String tmp = "";
        while ((tmp = br.readLine()) != null) {
            sbf.append(tmp);
        }
        String resultstr = sbf.toString();
        System.out.println("resultstr:"+resultstr);
        String[] arr = resultstr.split("\\$");
        String result = "";
        for(String s : arr){
            if(s.endsWith("pdf"))result = s;
        }
        return result;
    }
}

public class Converter {
    public static void main(String[] args) throws Exception {
        long start = System.currentTimeMillis();
        String result = Html2pdfUtil.parseHtml2Pdf("https://www.baidu.com");
        long all = System.currentTimeMillis()- start;
        System.out.println("pdf生成地址:"+result+",用时:"+all/1000+"秒");
    }
}

echarts-convert.js

(function() {
    var system = require('system');
    var fs = require('fs');
    var config = {
        // define the location of js files
        JQUERY : 'jquery-3.2.1.min.js',
        ECHARTS : 'echarts-all.js',
        // default container width and height
        DEFAULT_WIDTH : '800',
        DEFAULT_HEIGHT : '400'
    }, parseParams, render, pick, usage;

    usage = function() {
        console.log("\nUsage: phantomjs echarts-convert.js -options options -outfile filename -width width -height height"
                        + "OR"
                        + "Usage: phantomjs echarts-convert.js -infile URL -outfile filename -width width -height height\n");
    };

    pick = function() {
        var args = arguments, i, arg, length = args.length;
        for (i = 0; i < length; i += 1) {
            arg = args[i];
            if (arg !== undefined && arg !== null && arg !== 'null' && arg != '0') {
                return arg;
            }
        }
    };

    parseParams = function() {
        var map = {}, i, key;
        if (system.args.length < 2) {
            usage();
            phantom.exit();
        }
        for (i = 0; i < system.args.length; i += 1) {
            if (system.args[i].charAt(0) === '-') {
                key = system.args[i].substr(1, i.length);
                if (key === 'infile') {
                    // get string from file
                    // force translate the key from infile to options.
                    key = 'options';
                    try {
                        map[key] = fs.read(system.args[i + 1]).replace(/^\s+/, '');
                    } catch (e) {
                        console.log('Error: cannot find file, ' + system.args[i + 1]);
                        phantom.exit();
                    }
                } else {
                    map[key] = system.args[i + 1];
                }
            }
        }
        return map;
    };

    render = function(params) {
        var page = require('webpage').create(), createChart;

        page.onConsoleMessage = function(msg) {
            console.log(msg);
        };

        page.onAlert = function(msg) {
            console.log(msg);
        };

        createChart = function(inputOption, width, height) {
            var counter = 0;
            function decrementImgCounter() {
                counter -= 1;
                if (counter < 1) {
                    console.log(messages.imagesLoaded);
                }
            }

            function loadScript(varStr, codeStr) {
                var script = $('<script>').attr('type', 'text/javascript');
                script.html('var ' + varStr + ' = ' + codeStr);
                document.getElementsByTagName("head")[0].appendChild(script[0]);
                if (window[varStr] !== undefined) {
                    console.log('Echarts.' + varStr + ' has been parsed');
                }
            }

            function loadImages() {
                var images = $('image'), i, img;
                if (images.length > 0) {
                    counter = images.length;
                    for (i = 0; i < images.length; i += 1) {
                        img = new Image();
                        img.onload = img.onerror = decrementImgCounter;
                        img.src = images[i].getAttribute('href');
                    }
                } else {
                    console.log('The images have been loaded');
                }
            }
            // load opitons
            if (inputOption != 'undefined') {
                // parse the options
                loadScript('options', inputOption);
                // disable the animation
                options.animation = false;
            }

            // we render the image, so we need set background to white.
            $(document.body).css('backgroundColor', 'white');
            var container = $("<div>").appendTo(document.body);
            container.attr('id', 'container');
            container.css({
                width : width,
                height : height
            });

            // render the chart
            var myChart = echarts.init(container[0]);
            myChart.setOption(options);
            // load images
            loadImages();
        };

        // parse the params
        page.open("about:blank", function(status) {
            // inject the dependency js
            page.injectJs(config.JQUERY);
            page.injectJs(config.ECHARTS);

            var width = pick(params.width, config.DEFAULT_WIDTH);
            var height = pick(params.height, config.DEFAULT_HEIGHT);

            // create the chart
            page.evaluate(createChart, params.options, width, height);

            // define the clip-rectangle
            page.clipRect = {
                top : 0,
                left : 0,
                width : width,

                height : height
            };
            // render the image
            page.render(params.outfile);
            console.log('render complete:' + params.outfile);
            // exit
            phantom.exit();
        });
    };
    // get the args
    var params = parseParams();

    // validate the params
    if (params.options === undefined || params.options.length === 0) {
        console.log("ERROR: No options or infile found.");
        usage();
        phantom.exit();
    }
    // set the default out file
    if (params.outfile === undefined) {
        var tmpDir = fs.workingDirectory + '/tmp';
        // exists tmpDir and is it writable?
        if (!fs.exists(tmpDir)) {
            try {
                fs.makeDirectory(tmpDir);
            } catch (e) {
                console.log('ERROR: Cannot make tmp directory');
            }
        }
        params.outfile = tmpDir + "/" + new Date().getTime() + ".png";
    }

    // render the image
    render(params);
}());

echarts-options.js

该内容可以参考https://echarts.apache.org/examples/zh/index.html 官网，寻找自己需要的图表样式

{
    title : {
        text: '未来一周气温变化',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最高气温','最低气温']
    },
    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} °C'
            }
        }
    ],
    series : [
        {
            name:'最高气温',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'最低气温',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint : {
                data : [
                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
}

htmlToPdf.js

var page = require('webpage').create();
var system = require('system');

////读取命令行参数，也就是js文件路径。
if (system.args.length === 1) {
  console.log('Usage: loadspeed.js <some URL>');
//这行代码很重要。凡是结束必须调用。否则phantomjs不会停止
  phantom.exit();
}
page.settings.loadImages = true;  //加载图片
page.settings.resourceTimeout = 10000;//超过10秒放弃加载
//缩放比例
page.zoomFactor=1;
// 设置浏览器
page.settings.userAgent='Mozilla/5.0 AppleWebKit/537.36 (KHTML,like Gecko) Chrome/33.0.1750.117 Safari/537.36';
//截图设置，
//page.viewportSize = {
//  width: 1000,
//  height: 3000
//};
// 设置尺寸
page.paperSize={format: 'A4',orientation:'portrait',margin:'0.8cm',border:'1cm'};
// page.paperSize = { width:'1500px',height:'2000px',orientation: 'portrait',border: '1cm' };
var address = system.args[1];
var outpathstr = system.args[2];
page.open(address, function(status) {
    function checkReadyState() {//等待加载完成将页面生成pdf
        setTimeout(function () {
            var readyState = page.evaluate(function () {
                return document.readyState;
            });
            if ("complete" === readyState) {
                // var timestamp = Date.parse(new Date());
                // var pdfname = 'HT_'+timestamp + Math.floor(Math.random()*1000000);
                // var outpathstr = "/Users/zachary/Downloads/phantomjs2/bin/"+pdfname+".pdf";
                setTimeout(function () {
                    page.render(outpathstr);
                    //console.log就是传输回去的内容。
                    console.log("生成成功");
                    console.log("$"+outpathstr+"$");
                    phantom.exit();
                },200);
            } else {
                checkReadyState();
            }
        },200);
    }
    checkReadyState();
});

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<div></div>

这是个demo，随便写的，
如果要加载图片路径，可以使用相对路径，也可使用绝对路径
</body>
</html>

jquery-3.2.1.min.js 该文件自己百度下载下即可，就不贴了

echarts-all.js 该文件自己去百度下载下，这里就不贴了

使用方式

参考最上边贴的总结，命令行也在，自己动手试一试即可

PDF 格式设置

我们需要的设置，基本上就是页面格式、缩放、加载图片等，但有些例外，下面一一讲解。

page.paperSize = { format: 'A4', orientation: 'portrait', margin: '0.8cm' };

注释掉了官方例子的设置代码，因为传入的参数只有3个，到 .pdf 为止，如果写成通用模式，当然可以作为外部参数传入。

format ：A4 纸，可以设置 "5in7.5in", "10cm20cm", "Letter" 等

orientation ：纸方向是竖着的，或者 landscape

margin ：与纸四边间距，可自定义，也可详细设置 margin : { left: '0.8cm', top : '0.8cm', right : '0.8cm', bottom : '0.8cm' }

page.zoomFactor = 1;

page.settings.loadImages = true;

zoomFactor ：页面缩放比例

loadImages ：页面加载图片

page.settings.userAgent = 'Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36';

这个设置比较不常见，一般的示例中都没有提及，因为发现用 chrome 和 IE 打开生成的 pdf 时格式有点不一样(表现在分页方面)，由于偏向 Chrome 浏览格式，故设置此值，解决这个不一致问题。

page.open 里面的 setTimeout 方法作用：等待页面执行完 js ，再生成 pdf。当然对于 js 要执行多久(要等多久)，这个就不知道怎么预算了。其实我有试过 ajax 方式加载内容，但因此问题而作罢了。

PDF 分页

分页来说，更好控制，不需要代码（js）设置，页面使用样式即可：

style = “page-break-after: always;”

控制每页内容的大小，使用

content

就行。

更多选择 style=“page-break-before: always;” , style="page-break-inside: avoid;" 这个可以避免内容散到两页中

就写道这里了，觉得文章不错，留言鼓励下哦！