React-Puppeteer

这是一个可以在 tsx 环境中,使用 puppeteer 对 tsx 组件进行截图的库

强大的现代化框架 React.js 将为你管理组件和代码

点击 学习 React.js

> VScode 安装插件 ES7+ React/Redux/React-Native snippets

环境准备

yarn add react-puppeteer -W

• .puppeteerrc.cjs

> 自动搜索浏览器内核

/**
 * @type {import("puppeteer").Configuration}
 */
module.exports = require('react-puppeteer/.puppeteerrc')

• tsconfig.json

{
  "include": ["src/**/*"],
  // 继承react-puppeteer的ts配置
  "extends": ["react-puppeteer/tsconfig.json"]
}

使用教程

// src/Word.tsx
import React from 'react'
export default () => {
  return <div> hello React ! </div>
}

// src/image.tsx
import React from 'react'
import { pictureRender, render, ObtainProps } from 'react-puppeteer'
import Word from './Word.tsx'
export const pictureRender = (uid: number, Props: ObtainProps) => {
  // 生成 html 地址 或 html字符串
  return render({
    // html/hello/uid.html
    join_dir: 'hello',
    html_name: `${uid}.html`,
    html_body: 
  })
}

// src/index.ts
import { pictureRender } from './image.tsx'
const img: Buffer | false = await pictureRender(123456, {})
if (img) {
  // 可fs保存到本地
}

• run

npx tsx src/index.ts

本地调试

• tsconfig.json

{
  "include": ["tsxp.config.tsx"]
}

• tsxp.config.tsx

import React from 'react'
import { defineConfig } from 'react-puppeteer'
const Music = () => {
  return <div> 我的音乐</div>
}
export default defineConfig([
  {
    url: '/music',
    options: {
      html_body: 
    }
  }
])

• dev

npx tsxp dev

扩展功能

> VScode 安装插件 Path Intellisense

文件引入

createRequire 请确保引入的是项目目录下的文件

import React from 'react'
import { BackgroundImage, createRequire } from 'react-puppeteer'
const require = createRequire(import.meta.url)
export default function Word() {
  return (
    <>
      
        我有了一个背景图
      
      <img src="{require('./resources/example.svg')}">
      <img src="{require('./resources/example.png')}">
    
  )
}

截图方块

Puppeteer 截图是默认 body

你可以指定截图的元素为section

也可以设置section为指定的高度

export default function Word({ data }: PropsType) {
  return (
    <div>
      Hello, {data.name}!<section>嘎嘎</section>
    </div>
  )
}

export const pictureRender = (uid: number, Props: Parameters[0]) => {
  // 生成 html 地址 或 html字符串
  return render(
    {
      // html/hello/uid.html
      join_dir: 'hello',
      html_name: `${uid}.html`,
      html_body: 
    },
    {
      tab: 'section'
    }
  )
}

元素插入

import { createRequire, LinkCSS, LinkESM } from 'react-puppeteer'
const require = createRequire(import.meta.url)
export const Link = () => {
  return (
    <>
      
      
    
  )
}

import { readFileSync } from 'fs'
import { render } from 'react-puppeteer'
import { Link } from './link.tsx'
export const pictureRender = (uid: number, Props: Parameters[0]) => {
  // 生成 html 地址 或 html字符串
  return render({
    // html/hello/uid.html
    join_dir: 'hello',
    html_name: `${uid}.html`,
    html_head: ,
    html_body: 
  })
}

引用别名

定义一个显示图片的组件

import React from 'react'
export default () =&gt; <div></div>

创建一个 css 文件

> 图片位置./resources/exp.png

.show-image {
  // 引入上级目录的图片资源
  background-image: url('../exp.png');
}

正常情况下，截图工具是无法识别 css 内部引用的其他资源的

• 资源的位置随便可能会因为插件位置的改变而改变

• 框架的设计变更也可能发生改变

• 生产的 html 文件随时会变化

此时，开发者需要借助别名系统，确保资源能正常被识别出来

import { dirname, join } from 'path'
import { createRequire, render } from 'react-puppeteer'
import ImageComponent from './views/image.tsx'
const require = createRequire(import.meta.url)
export const ScreenshotOptions = {
  // 携带了别名的资源 效果等同 
  html_files: [require('./resources/css/example.main.css')],
  // 设置别名
  file_paths: {
    // 定位自身的 md文件，并获取目录地址
    '@example': dirname(require('./README.md'))
  },
  // 
  html_head: 
}
export const pictureRender = (uid: number, Props: Parameters[0]) => {
  // 生成 html 地址 或 html字符串
  return render({
    // html/hello/uid.html
    join_dir: 'hello',
    html_name: `${uid}.html`,
    ...ScreenshotOptions,
    html_body: 
  })
}

.show-image {
  // 在外部资源中使用别名引用
  background-image: url('@example/resources/exp.png');
}

tailwindcss

可以跟 talwindcss 结合，生产 css 后，引入到 head 组件

yarn add tailwind -W

• input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

• tailwind.config.js

import { createRequire } from 'module'
const require = createRequire(import.meta.url)
/**
 * @type {import('tailwindcss').Config}
 */
export default {
  // 内容
  content: ['src/**/*.{jsx.tsx.html}'],
  plugins: []
}

• output

npx 本地 -i 输入 -o 输出 -m 压缩

npx tailwindcss -i ./input.css -o ./output.css -m

• link.tsx

import React from 'react'
import { createRequire, LinkCSS } from 'react-puppeteer'
const require = createRequire(import.meta.url)
export const Link = () =>