使用koa和phantom.js 搭建一个html转pfd的服务

1.首先`PhantomJS`的功能

就是提供一个浏览器环境的命令行接口，你可以把它看作一个“虚拟浏览器”，除了不能浏览，其他与正常浏览器一样。它的内核是WebKit引擎，不提供图形界面，只能在命令行下使用，我们可以用它完成一些特殊的用途比如。网络监测、网页截屏、无需浏览器的
Web 测试、等等

2. 详细的功能可见官网https://phantomjs.org

3.本项目demo主要用到的api

https://phantomjs.org/api/webpage/property/paper-size.html

4 我们要实现的效果如下，当访问url时

可以看到生成的pdf对样式和图片都支持的很好

大概的逻辑流程如下：

首先安装koa相应的依赖和phantom

 cnpm i koa koa-views ejs uuid koa-static koa-body phantom

1.搭建http服务器

基本koa配置

const Koa = require('koa');
const path = require('path');
const views = require('koa-views');
const phantom = require('phantom');
const uuid = require('uuid');
const fs = require('fs');
const static = require('koa-static');
const body = require('koa-body');
const app = new Koa();
app.use(body()); //解析body中间件
app.use(views(path.join(__dirname, 'views'), { //设置模板引擎extension: 'ejs'
}))
app.listen(8080);//监听端口

ejs模板响应

app.use(async (ctx, next) => { //请求获取html
const url = ctx.url;
if (url === '/ejs2html') {const data = ctx.request.body; //获取请求的参数       await ctx.render('index', data) //渲染}
await next();
})

转pdf的请求处理

app.use(async (ctx, next) => { //获取pdf
const url = ctx.url;
if (url === '/getpdf') {      const data = await transformPdf();       ctx.set({        'Content-Type':'application/pdf'       })
ctx.body = fs.createReadStream(data.data.file); //返回pdf
}
})

2.实现 transformPdf方法

创建实例

async function transformPdf() {let ph = await phantom.create();let page = await ph.createPage();

设置phantom请求ejs模板页面时的相关参数（这里的date可以在请求时动态传入，因为是demo就写死了）

var settings = { //设置请求相关的配置operation: "POST",encoding: "utf8",headers: {"Content-Type": "application/json"},data: JSON.stringify({ name: "转pdf啦！！！" }) //请求主体};

请求页面

    url = "http://localhost:8080/ejs2html"; // 本地注册的路由let status = await page.open(url, settings); // 打开ejs模板的页面

如果请求成功，设置pdf页面的相关属性，然后返回存储路径

if (status == "success") {let filename = path.join(__dirname, 'pdf', uuid.v4() + '.pdf'); // 临时文件的下载目的路径page.property('viewportSize', { width: 600, height: 600 }); //设置pdf的页面大小page.property('paperSize', { //设置页面相关的属性format: 'A4',margin: {top: '30px'},footer: {height: "30px",contents: ph.callback(function (pageNum, numPages) {return "<div align='center'><span>P." + pageNum + " of " + numPages + "</span></div>";})}});await page.render(filename); // 将html转换为pdf 并且保存到当前filename设置的目录下ph.exit();return { msg: '', data: { file: filename } };} else {return {  msg: 'error', data: {} };}
}

目录结构如下

ejs模板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1 style="color: aqua;"><%= name%></h1><img src="/timg.jpg" alt="青蛙">
</body>
</html>

- 注意事项
在转pdf时ejs模板开发如果使用到flex之类，请添加-webkit前缀，否则不生效
还有如果为了防止内容内分页可以在加page-break-inside: avoid;css样式可以防止内容被分页

使用koa和phantom.js 搭建一个html转pfd的服务相关推荐

使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课
使用webgl(three.js)搭建一个3D建筑,3D消防模拟--第三课项目背景消防安全一直是各大都市关注的重要课题,在消防体系中,特别是高楼消防体系中,消防系统整体布控与监控,火情有效准确定位 ...
用css，html，js搭建一个书店购物系统
用css,html,js搭建一个书店购物系统,如下: <!DOCTYPE html> <html> <head> <meta charset="ut ...
Node.js搭建一个简单的服务器
文章目录 Node.js的安装了解Node.js模块系统服务器的搭建一.创建一个Web服务器注意程序代码运行二.静态资源托管静态资源注意程序代码运行三.简单接口的实现(简单服务 ...
利用SpringCloud搭建一个最简单的微服务框架
利用SpringCloud搭建一个最简单的微服务框架 https://blog.csdn.net/caicongyang/article/details/52974406 1.微服务微服务主要包含服 ...
流媒体视频服务：快速搭建一个简单的流媒体视频服务（一）
快速搭建一个简单的流媒体视频服务前言系统组成 RTMP协议简介 Red5 概述 Red5 服务器搭建前言最近自己在研究有关于流媒体播放的技术,网上资料甚少.出于开源精神以及在查阅资料得到各位大 ...
基于docker+reveal.js搭建一个属于自己的在线ppt网站
前言最近热衷于Docker,由于这段时间使用Docker来折腾自己的服务器,越来越感觉这是一种极其被应该推广的技术,因此想在公司内部也做一次技术分享.当然,如果只是做的PPT,我就不写这文章了.既然 ...
在Node环境中使用JS搭建一个基础服务器
目录一.http模块二.创建Web服务器 1.导入http模块 2.创建Web服务器实例 3.绑定事件,监听请求 4.调用服务器实例的listen()方法,启动服务器三.搭建并运行四.解决中 ...
使用Nuxt.js搭建VUE应用的SSR（服务端渲染）
Nuxt.js的介绍 Nuxt.js概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染) Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用V ...
利用VPS服务器搭建一个FRP内网穿透服务和Web服务穿透
目标:实现在公司用mstsc访问控制家里的电脑附:基本配置参考:FRP服务端和客户端的基本配置_JohnGene的博客准备资料 1.带有公网ip的Linux主机,下面假设1.2.3.4是固定外网i ...

使用koa和phantom.js 搭建一个html转pfd的服务

1.首先`PhantomJS`的功能

2. 详细的功能可见官网https://phantomjs.org

3.本项目demo主要用到的api

4 我们要实现的效果如下，当访问url时

使用koa和phantom.js 搭建一个html转pfd的服务相关推荐

最新文章

热门文章

使用koa和phantom.js 搭建一个html转pfd的服务

1.首先PhantomJS的功能

2. 详细的功能可见官网https://phantomjs.org

3.本项目demo主要用到的api

4 我们要实现的效果如下，当访问url时

使用koa和phantom.js 搭建一个html转pfd的服务相关推荐

最新文章

热门文章

1.首先`PhantomJS`的功能