使用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样式可以防止内容被分页

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,下面我来给你简单介绍一下搭建Koa服务器并实现注册功能的步骤。 1. 搭建Koa服务器 首先,你需要安装Node.js和npm包管理工具。然后,通过npm安装koakoa-router模块。 ``` npm install koa koa-router ``` 接着,创建一个koa应用。在项目根目录下创建一个app.js文件,输入以下代码: ``` const Koa = require('koa'); const Router = require('koa-router'); const app = new Koa(); const router = new Router(); router.get('/', async (ctx, next) => { ctx.body = 'Hello World'; }); app.use(router.routes()).use(router.allowedMethods()); app.listen(3000, () => { console.log('Server is running at http://localhost:3000'); }); ``` 上述代码创建了一个koa应用,在浏览器中访问http://localhost:3000,会显示“Hello World”。 2. 实现注册功能 接下来,我们来实现注册功能。首先,我们需要安装koa-bodyparser模块,这个模块可以将post请求的参数解析到ctx.request.body中。 ``` npm install koa-bodyparser ``` 在app.js文件中,引入koa-bodyparser模块,并添加一个post路由: ``` const Koa = require('koa'); const Router = require('koa-router'); const bodyParser = require('koa-bodyparser'); const app = new Koa(); const router = new Router(); router.get('/', async (ctx, next) => { ctx.body = 'Hello World'; }); router.post('/register', async (ctx, next) => { const { username, password } = ctx.request.body; // 这里可以将用户名和密码存储到数据库中 ctx.body = { code: 0, message: '注册成功' }; }); app.use(bodyParser()); app.use(router.routes()).use(router.allowedMethods()); app.listen(3000, () => { console.log('Server is running at http://localhost:3000'); }); ``` 上述代码添加了一个post路由,当访问http://localhost:3000/register时,会将post请求的参数解析到ctx.request.body中,并将用户名和密码存储到数据库中(这里省略了数据库操作),最后返回一个json数据表示注册成功。 好了,到这里为止,我们就成功地搭建一个Koa服务器并实现了注册功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木木林_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值