一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

boyanx4个月前 (08-03)技术教程25

（坑给你踩完，可行的结果给你探明，让你的方向明确，存在的小问题自行解决）

1、不要考虑前端转pdf了，我已经帮您爬过坑了。

前端转PDF，本质就是把网页通过canvas转成图片，图片转成PDF。

坑1：PDF文件占内存很大，本来应该是500kb的pdf，直接给你转出20M的pdf。
坑2：PDF很模糊，文字重影，各种控制画质的参数都无法解决。
坑3：PDF中其实就是一张图片，文字无法复制。

2、不要考虑后端PHP转PDF了，我已经帮您爬过坑了。

后端转PDF，本质就是用PHP干HTML的事情。

坑1：PHP去写html那种苦，只有苦命人能吃，特别是遇到JS图表等样式，直接生无可恋。
坑2：PHP去干html的事情无法在浏览器上预览，只有写一下导出pdf看效果，一套开发下来，导几百个pdf，这种苦您能吃不？
坑3：还要求你引入字体包等，麻烦死了。

3、不要考虑后端调用HTML转PDF了，我已经帮您爬过坑了。

后端调用HTML转PDF，本质就是PHP是识别HTML，再转出来。

坑1：大部分HTML不支持，不支持css文件，不支持js等图表，只能写行内样式。
坑2：写出来的浏览器预览效果和导出来的PDF不一致，试着去调样式，再导出pdf看效果，一套开发下来，导几百个pdf，这种苦您能吃不？

今天，亮哥从万坑从中爬出来，为广大劳苦程序猿献上一份：终极解决HTML/CSS/JS网页转PDF(高质量)的终极解决方案，请官人怜惜。

1、准备工作：待转网页、服务器环境。

（1）、待转网页：把你要转出的网页样式，用html、css、js排版出来，不用去在乎兼容性，您能想到的效果都支持。如果您是在网站中弹窗页面预览，网页套在ifram中弹窗即可。
（2）、服务器环境：建议使用傻瓜式维护linux的宝塔，如果您是的linux命令高手也可以不用宝塔。

2、安装wkhtmltopdf：在服务器上安装wkhtmltopdf软件。

安装软件过程中可能会出现各种各样的linux提示报错，因为报错多种多样，我没办法给您一一列举，您根据linux的报错去自行爬文档处理，我这里只给一个我探明可行，可用的思路，你顺着思路走即可。

A、打开服务器终端。

B、下载wkhtmltopdf复制运行命令：

wget https://github.com/wkhtmltopdf/wkhtmltopdf/releases/download/0.12.5/wkhtmltox-0.12.5-1.centos7.x86_64.rpm

C、安装wkhtmltopdf复制运行命令：

sudo yum localinstall -y wkhtmltox-0.12.5-1.centos7.x86_64.rpm

D、检测wkhtmltopdf是否安装成功，复制运行命令：

wkhtmltopdf -V

3、用PHP创建一个超出的API接口

function PDF()
    {
        $inputFile = 'https://baidu.com'; //您要转出的网页路径
        $outputFile = ROOT_PATH . 'public/uploads/pdf/xxxx.pdf'; //存放PDF的物理路径
        $url =  '/public/uploads/pdf/xxxx.pdf'; //定义相对路径
        $wkhtmltopdfBinary = '/usr/local/bin/wkhtmltopdf --margin-top 5mm --margin-bottom 5mm --margin-left 5mm --margin-right 5mm'; //wkhtmltopdf命令的路
        $command = $wkhtmltopdfBinary . ' ' . escapeshellarg($inputFile) . ' ' . escapeshellarg($outputFile); //构建命令
        exec($command, $output, $returnCode); //执行命令行

        //执行失败暴露错误，用于debug
        if ($returnCode !== 0) { 
            $obj['output']=$output;
            $obj['returnCode']=$returnCode;
            return $obj;
        };
        //执行成功，如果有数据库操作，请在下面写你的数据操作

    }
}

4、导出效果