小编昨天花了一天的时间在搞将网页导出pdf,这也让小编十分的焦虑,就是最开始觉得整体问题我只需要花一周的时间,可是没想到,需求中光将页面导出为pdf这个问题就难倒了我一整天,哎,无法确定的事情啊,还是不能自大的说自以为觉得半天就能搞定了,否则没有按时完成开发,那可就是自己的锅了。

小编先后采用了html2canvas.js+jspdf.debug.js方法和wkhtmltopdf两种方法,小编使用js导出的时候总是感觉有一些地方就好像失真了(有些地方就是样式昏暗,模糊不清),最后决定使用wkhtmltopdf方法,不过小编在使用wkhtmltopdf时也遇见了一些问题,特地做个记录,来吧,展示!

使用echarts时需要将

require.config({
        paths: {
            echarts: '../../dist/echarts'
        }
    });
    var chart;
    require([
        'echarts'
    ], function (echarts) {

        chart = echarts.init(document.getElementById('main'));

        var data = [
            { "name": "USA", "value": 15276.0 },
            { "name": "UK", "value": 4855.0 },
            { "name": "France", "value": 3291.0 },
            { "name": "Italy", "value": 3157.0 },
            { "name": "Spain", "value": 2859.0 },
            { "name": "Brazil", "value": 1662.0 },
            { "name": "Others", "value": 5152.0 }
        ];

        chart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            animation: false,//添加代码,去掉页面加载时动画效果,避免pdf生成残缺的统计图
            series: [{
                name: 'Total deaths of various countries',
                type: 'pie',
                data: data,
                radius: '50%',
                clockwise: false,
                label: {
                    formatter: "{b} : {num|{c}} | {rate|{d}%}",
                    color: "black",
                    fontSize: 20,
                    rich: {
                        num: {
                            fontSize: 22,
                            fontWeight: 'bold',
                            color: "black"
                        },
                        rate: {
                            fontSize: 22,
                            fontWeight: 'bold',
                            color: "black"
                        },
                        symbol: {
                            fontSize: 22,
                            color: "black"
                        }
                    }
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        });

    });

使用C#时需要注意不要用含有用户权限的东西,这个逻辑在其页面最终将无法生成页面效果图
在这里插入图片描述
含有session和cookie的代码最终都会失效(小编最初因为没有去掉该页面的session逻辑最后页面直接自动转到登录页面,生成登录页面,有时候还会生成空白页面)
补充一些C#+wkhtmltopdf的使用代码

private void CreateStudyDetailReport()
{
    //string website = AppSettingHelper.GetWebSite();
    string website = "http://localhost:11426";
    string url = website + "/UserCenter/DataCenter/StudyDetailReport.aspx?BtnStatus=1";

    string pdf = @"c:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe";

    string filename = Guid.NewGuid().ToString();
    string strDir = Server.MapPath("/CertificatPic/" + System.DateTime.Now.ToString("yyyyMM") + "/");

    FileSystem fs = new FileSystem();
    fs.Mkdir(strDir);

    System.Diagnostics.Process p1 = System.Diagnostics.Process.Start(pdf, url + " \"" + strDir + filename + ".pdf" + "\"");
    p1.WaitForExit();
}

达则兼济天下,穷则独善其身。有多少能力办多少事,不要为一些自己都没有能力解决的事情而瞎操心,健康的生活才是最重要的。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐