[英]Exporting content within div along with styled components to text/html file
Here is my code for Exporting content within div along with styled components to text/html file:这是我将 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;
After running the code, everything is fine the component gets correctly rendered with all its CSS by styled-components but when I click on Download Template link, the file which gets downloaded does not have any CSS only the content is there.运行代码后,一切正常,组件通过 styled-components 正确呈现其所有 CSS,但是当我单击下载模板链接时,下载的文件没有任何 CSS,只有内容存在。 It looks something like this: Screenshot of Output file
它看起来像这样:输出文件的屏幕截图
Here is the source code of output html 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" 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>
Please provide me some solution for this.请为此提供一些解决方案。
The styled component will generate a className refering a linked css sheet.样式组件将生成一个引用链接的 css 表的 className。 you downloaded the html, but the css file haven't been downloaded with it.
您下载了 html,但尚未下载 css 文件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.