首页 > 解决方案 > 无法为下载的 html 文件添加 CSS 样式

问题描述

我正在尝试以 HTML 格式下载文件,我可以下载该文件,但缺少页面样式,请您帮助其中任何一个。下面是示例代码。

单击 Methode 下载文件。

html内容(){

var elHtml = document.getElementById("row-id").innerHTML;
var link = document.createElement('a');
var mimeType = 'text/html';
link.setAttribute('download', 'live-activity.html');
link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));
link.click();

}

这是下载的内容

(Eleref = el)}>
        {
          outputResult && outputResult.map((item, index) => (

            <tr key={index} >
            <td>{item.location}</td>
            {this.state.statusOfParameters[0].status == 'Active' ?  <td className={this.getColorCode({ 'Temperature': item.Temperature }, index)}> {item.Temperature}</td>:''}
            {this.state.statusOfParameters[1].status == 'Active' ?  <td className={this.getColorCode({ 'RelativeHumidity': item.RelativeHumidity }, index)}>{item.RelativeHumidity}</td>:''}
            {this.state.statusOfParameters[2].status == 'Active' ? <td className={this.getColorCode({ 'StaticPressure': item.StaticPressure }, index)}>{item.StaticPressure}</td>:''}
            {this.state.statusOfParameters[3].status == 'Active' ? <td className={this.getColorCode({ 'CO': item.CO }, index)}>{item.CO}</td>:''}
           {this.state.statusOfParameters[4].status == 'Active' ?  <td className={this.getColorCode({ 'CO2': item.CO2 }, index)}>{item.CO2}</td>:''}
           {this.state.statusOfParameters[5].status == 'Active' ?  <td className={this.getColorCode({ 'PM2.5': item['PM2.5'] }, index)}>{item['PM2.5']}</td>:''}
            {this.state.statusOfParameters[6].status == 'Active' ? <td className={this.getColorCode({ 'PM10': item.PM10 }, index)}>{item.PM10}</td>:''}
            {this.state.statusOfParameters[7].status == 'Active' ? <td className={this.getColorCode({ 'TVOC': item.TVOC }, index)}>{item.TVOC}</td>:''}
        {this.state.statusOfParameters[8].status == 'Active' ? <td className={this.getColorCode({ 'CH2O': item.CH2O }, index)}>{item.CH2O}</td>:''}
            {this.state.statusOfParameters[9].status == 'Active' ? <td className={this.getColorCode({ 'O3': item.O3 }, index)}>{item.O3}</td>:''}
          </tr>
          ))
        }

      </tbody>

**此处附上下载文件的屏幕截图 ** 在此处 输入图像描述

标签: htmlreactjsexport

解决方案


推荐阅读