【工具篇】那些年你应该遇到过的html转换成pdf

风中个php做的云 2020/7/31 14:04:02

前言这几天遇到一个需求需求背景就是这样的:我们有个功能叫做合同预览(由后端返回一堆json前端渲染显示),现在想把最后的样子变成pdf,但是把这个json数据需要根据具体业务需求去计算。我想的是如何再不动现在业务代码上去实现pdf显示,直接把现在的html渲染后的合同ht…

前言

这几天遇到一个需求
需求背景就是这样的:我们有个功能叫做合同预览(由后端返回一堆json前端渲染显示),现在想把最后的样子变成pdf,但是把这个json数据需要根据具体业务需求去计算。
我想的是如何再不动现在业务代码上去实现pdf显示,直接把现在的html渲染后的合同html内容直接生成的pdf,作为一个资深搜索引擎引擎开发工程师打开我熟悉的搜索引擎开始搜索 【html转pdf】
image.png

插曲 关于wkhtmltopdf

一开始搜索到的是wkhtmltopdf

下载链接 https://wkhtmltopdf.org/ 直接下载对应操作系统的版本
wkhtmltopdf https://baidu.com baidu.pdf

打开baidu.pdf
image.png
看完,感觉稳一半了!

but
but
but
but
我们的前端是vue构造的 url大概是这样的 http://yun.xiaobaibar.com/#/login

这个链接之前很早自己做的项目 暂时拿来凑个数
wkhtmltopdf http://yun.xiaobaibar.com/#/login demo.pdf

他实际是这个样子
image.png
转成pdf是个样子!
image.png

what fuck

后来我大概稍微看了下vue-router的原理

vue-router 是直接找到与地址匹配的一个组件或对象并将其渲染出来,在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航。

简单就说 就是入口页面 -> 根据#后的路由 -> 再执行路由的js渲染页面
也就是入口页面的样式就是一个啥也没有的东西

所以为什么用wkhtmltopdf是一片空白,本质类似curl对应的页面内容根据代码转化成pdf,缺少了执行js的过程。
image.png

最终方案 puppeteer

这里感谢下我们组的前端女大佬
关于puppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包,用来模拟Chrome 浏览器的运行。这个模拟就是非常关键,竟然能模拟浏览器运行那当然可以执行js渲染啦!具体可以自己搜索了解。
安装过程

npm i puppeteer
npm i puppeteer-core

附上demo代码

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://yun.xiaobaibar.com/#/login');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

node demo.js

结果为
image.png

最后

工具很重要,他可能凸显不出你面试时候的气质,但是的确再工作中能减少你很多的开发量。

但是也有人会说我是写php的,我是写java的,但是你这个解决方案是node的,我一直有个观念就是语言就是为了实现需求,需要什么写什么。

os:事实上我还是只会写php
u=4109769687,2671404883&fm=26&gp=0.jpg

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[【工具篇】那些年你应该遇到过的html转换成pdf]http://www.zyiz.net/tech/detail-145468.html

上一篇:回答一下这 10 个最常见的 Javascript 问题

下一篇:yunmu2hanzi通过韵母查找所有此韵母的汉字

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程