这是一个可以在 tsx 环境中,使用 puppeteer 对 tsx 组件进行截图的库
强大的现代化框架 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<typeof Word>) => {
// 生成 html 地址 或 html字符串
return render({
// html/hello/uid.html
join_dir: 'hello',
html_name: `${uid}.html`,
html_body: <Word {...Props} />
})
}// 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: <Music />
}
}
])- dev
npx tsxp devVScode 安装插件
Path Intellisense
createRequire 请确保引入的是项目目录下的文件
import React from 'react'
import { BackgroundImage, createRequire } from 'react-puppeteer'
const require = createRequire(import.meta.url)
export default function Word() {
return (
<>
<BackgroundImage url={require('./resources/example.png')} size="100% 100%">
我有了一个背景图
</BackgroundImage>
<img src={require('./resources/example.svg')} />
<img src={require('./resources/example.png')} />
</>
)
}Puppeteer 截图是默认 body
你可以指定截图的元素为section
也可以设置section为指定的高度
export default function Word({ data }: PropsType) {
return (
<div className="text-red-500 p-2 text-xl m-80">
Hello, {data.name}!<section className="h-[80rem] w-[90rem]">嘎嘎</section>
</div>
)
}export const pictureRender = (uid: number, Props: Parameters<typeof Word>[0]) => {
// 生成 html 地址 或 html字符串
return render(
{
// html/hello/uid.html
join_dir: 'hello',
html_name: `${uid}.html`,
html_body: <Word {...Props} />
},
{
tab: 'section'
}
)
}import { createRequire, LinkCSS, LinkESM } from 'react-puppeteer'
const require = createRequire(import.meta.url)
export const Link = () => {
return (
<>
<LinkESM src={require('../../resources/js/hello.js')} />
<LinkCSS src={require('../../resources/css/hello.css')} />
</>
)
}import { readFileSync } from 'fs'
import { render } from 'react-puppeteer'
import { Link } from './link.tsx'
export const pictureRender = (uid: number, Props: Parameters<typeof Word>[0]) => {
// 生成 html 地址 或 html字符串
return render({
// html/hello/uid.html
join_dir: 'hello',
html_name: `${uid}.html`,
html_head: <Link />,
html_body: <Word {...Props} />
})
}定义一个显示图片的组件
import React from 'react'
export default () => <div className="show-image"></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 = {
// 携带了别名的资源 效果等同 <head />
html_files: [require('./resources/css/example.main.css')],
// 设置别名
file_paths: {
// 定位自身的 md文件，并获取目录地址
'@example': dirname(require('./README.md'))
},
// <head />
html_head: <Link />
}
export const pictureRender = (uid: number, Props: Parameters<typeof ImageComponent>[0]) => {
// 生成 html 地址 或 html字符串
return render({
// html/hello/uid.html
join_dir: 'hello',
html_name: `${uid}.html`,
...ScreenshotOptions,
html_body: <ImageComponent {...Props} />
})
}.show-image {
// 在外部资源中使用别名引用
background-image: url('@example/resources/exp.png');
}可以跟 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 = () => <LinkCSS src={require('./output.css')} />