fix: 修复截图元素

This commit is contained in:
ningmengchongshui 2024-06-17 11:48:36 +08:00
parent dacfbabef9
commit 187f23cdea
3 changed files with 25 additions and 5 deletions

7
src/main.css Normal file
View File

@ -0,0 +1,7 @@
body {
margin: 0;
padding: 0;
/* 去除边距影响 */
display: flex;
flex-direction: column;
}

View File

@ -2,8 +2,7 @@ import React from 'react'
import { renderToString } from 'react-dom/server' import { renderToString } from 'react-dom/server'
import { mkdirSync, writeFileSync } from 'fs' import { mkdirSync, writeFileSync } from 'fs'
import { join } from 'path' import { join } from 'path'
import { createRequire } from './module.js' import { getLink } from './link.tsx'
const require = createRequire(import.meta.url)
/** /**
* *
*/ */
@ -37,6 +36,7 @@ export type ComponentCreateOpsionType = {
* ********** * **********
*/ */
export class Component { export class Component {
#Link = getLink()
#dir = '' #dir = ''
/** /**
* *
@ -47,6 +47,7 @@ export class Component {
recursive: true recursive: true
}) })
} }
/** /**
* *
* @param element * @param element
@ -58,10 +59,8 @@ export class Component {
const dir = join(this.#dir, options?.join_dir ?? '') const dir = join(this.#dir, options?.join_dir ?? '')
mkdirSync(dir, { recursive: true }) mkdirSync(dir, { recursive: true })
const address = join(dir, options?.html_name ?? 'hello.html') const address = join(dir, options?.html_name ?? 'hello.html')
const href = require('../../public/output.css')
const DOCTYPE = '<!DOCTYPE html>' const DOCTYPE = '<!DOCTYPE html>'
const Link = `<link rel="stylesheet" href="${href}"></link>` const head = `<head>${this.#Link}${options?.html_head ?? ''}</head>`
const head = `<head>${Link}${options?.html_head ?? ''}</head>`
const body = `<body>${str}${options?.html_body ?? ''}</body>` const body = `<body>${str}${options?.html_body ?? ''}</body>`
const html = `${DOCTYPE}<html>${head}${body}</html>` const html = `${DOCTYPE}<html>${head}${body}</html>`
if ( if (

14
src/utils/link.tsx Normal file
View File

@ -0,0 +1,14 @@
import React from 'react'
import { renderToString } from 'react-dom/server'
import { createRequire } from 'module'
const require = createRequire(import.meta.url)
const output = require('../../public/output.css')
const main = require('../main.css')
export const getLink = () => {
return renderToString(
<>
<link rel="stylesheet" href={output} />
<link rel="stylesheet" href={main} />
</>
)
}