将 div 中的内容与样式组件一起导出到 text/html 文件

Posted 2023-02-22

【中文标题】将 div 中的内容与样式组件一起导出到 text/html 文件

【英文标题】：Exporting content within div along with styled components to text/html file

【发布时间】：2019-08-01 10:03:03

【问题描述】：

这是我将 div 中的内容以及样式组件导出到 text/html 文件的代码：

import React,  Component  from 'react';
import styled from 'styled-components';

class App extends Component
constructor(props) 
super(props);


dwnldTemplate = () => 
    var inHTML = document.getElementById('page').innerHTML;
    var link = document.createElement('a');
    link.setAttribute('download', 'temp.html');
    link.setAttribute('href', 'data:' + 'text/html'  +  ';charset=utf-8,' + encodeURIComponent(inHTML));
    document.body.appendChild(link);
    link.click(); 
    document.body.removeChild(link);
  

render() 

const PageStyle = styled.div`
  display: flex;
  flex-wrap: wrap;
`;

const MainHeadingStyle = styled.div `
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 50px;
  font-family: ProximaNova;
  font-size: 20px;
  font-weight: 500;
  color: #222222;
  text-align: center;
  display: block;
`;

const SubHeadingStyle = styled.div`
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 50px;
  font-family: ProximaNova;
  font-size: 18px;
  font-weight: 500;
  color: #444444;
  text-align: center;
  display: block;
`;

const WrapperStyle = styled.div`
  width: 100%;
  height: 300px;
  display: flex;
  font-family: ProximaNova;
  font-size: 18px;
  font-weight: 500;
`;

const BannerImage = styled.img`
  height: 300px;
  max-width: 1200px;
  width: 100%;
  display: block;
`;


return(
  <div>
    <PageStyle id="page">
      <MainHeadingStyle>
        Hello
      </MainHeadingStyle>
      <SubHeadingStyle >
        World
      </SubHeadingStyle>
      <WrapperStyle>
        <BannerImage src="https://wallpaperstock.net/colorado-road_wallpapers_37483_1366x768.jpg" id="placedImage"  />
      </WrapperStyle>
      <WrapperStyle>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </WrapperStyle>
    </PageStyle>
    <a href="#" onClick=this.dwnldTemplate>Download Template</a>
  </div>
);


export default App;

运行代码后，一切正常，组件通过 styled-components 正确渲染了所有 CSS，但是当我点击下载模板链接时，下载的文件没有任何 CSS，只有内容在那里。它看起来像这样： Screenshot of Output file

这里是输出html文件的源代码：

<div class="sc-fcdeBU hnxoDZ">Hello</div>
<div class="sc-gmeYpB kcmIus">World</div>
<div class="sc-kZmsYB bifgZI">
<img src="data:image/jpeg;base64" id="placedImage"  class="sc-RcBXQ gFFQMD">
</div>
<div class="sc-kZmsYB vkNaR">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

请为此提供一些解决方案。

【问题讨论】：

下载的文件是否可能缺少 React 框架中的 CSS？能否附上下载的html文件的完整源代码？

@SarathChandra 请再次参考帖子，我已经添加了下载的html文件的来源。

【参考方案1】：

样式化的组件将生成一个引用链接 css 表的类名。你下载了html，但是css文件还没有下载。

【讨论】：

我明白你在说什么。您能否为此提供一个简短的解决方案？

我想将 div(id="page") 中的内容与 CSS（我已包含在 styled-components 中）一起导出到 text/html 文件。

好的，你可以用jsx编写css内联了。 Styled-components 不支持获取 css sheet。