將 div 中的內容連同樣式組件一起導出到 text/html 文件

Question

這是我將 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" alt="PlaceImage" />
      </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，只有內容存在。 它看起來像這樣：輸出文件的屏幕截圖

這是輸出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" alt="PlaceImage" 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>

請為此提供一些解決方案。

Answer 1

樣式組件將生成一個引用鏈接的 css 表的 className。 您下載了 html，但尚未下載 css 文件。