Skip to main content

jsxp

截图​

jsxp

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

ProjectStatusDescription
jsxpjsxp-s打包工具

若使用VScode进行开发：安装插件 ES7+ React/Redux/React-Native snippets

安装
yarn add jsxp -W

自动搜索浏览器内核

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

使用示例​

src/hello.tsx
// 示例react组件
import React from 'react'
export default () => {
  return (
    <html>
      <body>
        <div> hello React ! </div>
      </body>
    </html>
  )
}
src/image.tsx
//示例 调用jsxp默认截图渲染方法，当然也可以自定义并拓展截图方法
import React from 'react'
import { renders, ObtainProps } from 'jsxp'
import Hello from './hello.tsx'
export const pictureRender = renders({
  Hello
})
src/index.ts
import { pictureRender } from './image.tsx'
const img: Buffer | false = await pictureRender(Hello, {})
if (img) {
  // 可fs保存到本地
}

本地调试​

import('jsxp').then(res => res.createServer())
jsxp.config.tsx
import React from 'react'
import Hello from './hello'
import { defineConfig } from 'jsxp'
export default defineConfig({
  routes: {
    '/hello': {
      component: <Hello data={(123456, {})} />
    }
  }
})
使用lvyjs启动截图热开发
npx lvy dev --view

背景图​

import React from 'react'
import { BackgroundImage } from 'jsxp'
import img_url from './resources/example.pn'
export default function Word() {
  return (
    <html>
      <body>
        <BackgroundImage src={img_url} size="100% 100%">
          <div>我有了一个背景图</div>
        </BackgroundImage>
      </body>
    </html>
  )
}

样式资源​

./link.tsx
import { LinkStyleSheet, LinkESM } from 'jsxp'
export default function Word() {
  return (
    <html>
      <head>
        {
          // 绝对路径
        }
        <LinkStyleSheet src="/cwd/resources/css/hello.css" />
      </head>
      <body></body>
    </html>
  )
}

截图类​

import { picture } from 'jsxp'
const pic = await picture()
// 绝对路径（同时内部的资源也必须是绝对路径）
const dir = '/cwd/data/image.html'
// 截图指定html
const img = await pic.puppeteer.render(dir)