【react】动态页面转换成html文件下载,解决样式问题

这篇具有很好参考价值的文章主要介绍了【react】动态页面转换成html文件下载,解决样式问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求

今天遇到一个需求,挺恶心人的,将一个在线文档页面,可以导出成为html页面查看。

看到网上有使用fs模块,通过react的ReactDOMServer.renderToStaticMarkup将组件转成html字符串,输出文件了。
但是我尝试了,发现引入的fs为空,我就愁思,这个node环境下的模块,在react项目中能用么,一想到这里,自己真的是太笨了,肯定的不适用啊。fs是node模块,除非是next.js,不然用不了。

解决

思路类似,获取页面上渲染完成的dom字符串,通过a标签下载

URL.createObjectURL(file)

const fileName = `${name}.html`;
  const file = new File([htmlWithStyles], fileName, { type: 'text/html' });
  const oUrl = URL.createObjectURL(file);
  const a = document.createElement('a');
  a.style.setProperty('display', 'none');
  a.href = oUrl;
  a.download = file.name;
  document.body.appendChild(a);
  a.click();
  a.remove();
  const delay = 10000;
  setTimeout(() => URL.revokeObjectURL(oUrl), delay);

但是问题来了,发现下载的文件样式不存在 需要引入外部样式或者在写在style标签中

  const htmlWithStyles = `
  <html>
    <head>
    <style>${styles}</style>
    </head>
    <body>
      <div style="display:flex; height: 100%;">
      ${html}
      </div>
    </body>
  </html>
`;

笨人方法只有这样了,再高级点的,俺也不会

代码

这里的styles是外部定义的
要跟下载后的html里面的classname要对应,毕竟react项目跑起来的样式是加了很多前缀,比如这样
【react】动态页面转换成html文件下载,解决样式问题,react.js,html,前端
还有一个问题,就是使用的antd的表格,样式实在是太多了,但是还是要copy进去,不然静态页面样式就缺失了,从原本的页面里面,index.less进去,把所有的跟table相关的样式都copy过来。
【react】动态页面转换成html文件下载,解决样式问题,react.js,html,前端
【react】动态页面转换成html文件下载,解决样式问题,react.js,html,前端
所以说这个需求感觉没啥难度,但是又挺麻烦的。

封装方法

export function downHtmlFile({ html, name }) {
  // 创建包含外部样式链接的 HTML 字符串
  const htmlWithStyles = `
  <html>
    <head>
    <style>${styles}</style>
    </head>
    <body>
      <div style="display:flex; height: 100%;">
      ${html}
      </div>
    </body>
  </html>
`;
  const fileName = `${name}.html`;
  const file = new File([htmlWithStyles], fileName, { type: 'text/html' });
  const oUrl = URL.createObjectURL(file);
  const a = document.createElement('a');
  a.style.setProperty('display', 'none');
  a.href = oUrl;
  a.download = file.name;
  document.body.appendChild(a);
  a.click();
  a.remove();
  const delay = 10000;
  setTimeout(() => URL.revokeObjectURL(oUrl), delay);
}

在页面代码中使用

我是class组件,函数组件用useRef就好了,思路就是通过ref获取html字符串

 <div className={styles.con} ref={this.contentRef}>123</div>

	this.contentRef = createRef(); // 在构造方法中定义

  // 导出html文件
  handleExport = name => {
    const div = this.contentRef.current;
    if (!div) return;
    const html = div.innerHTML;
    downHtmlFile({ html, name });
  };

最后效果

【react】动态页面转换成html文件下载,解决样式问题,react.js,html,前端文章来源地址https://www.toymoban.com/news/detail-759808.html

到了这里,关于【react】动态页面转换成html文件下载,解决样式问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML - HTML中使用JS下载文本文件

    如果只希望将一些文本以文件形式保存到本地,则可以使用 a 标签 点我下载 拓展:字符串形式的DOM: 方法一中若要下载的文本中有引号,则转义起来比较麻烦。因此可以使用文件流来进行下载: 点我下载 在CSDN中可能因为无法执行JS等原因看不到效果,具体效果可以前往我

    2024年02月13日
    浏览(38)
  • html利用a标签实现下载本地的文件

            在写html页面的时候,需要在网页上提供一个下载按钮可以下载我自己电脑中的文件。我已经知道了该文件的路径,但是之前看了很多文章都没找到正确办法,一直不知道如何能够下载本地的文件,经过不断实验发现,可以利用a标签中的downlo属性,同时将href属性设

    2023年04月15日
    浏览(42)
  • Springboot + MySQL + html 实现文件的上传、存储、下载、删除

    实现步骤及效果呈现如下: 1.创建数据库表: 表名:file_test 存储后的数据: 2.创建数据库表对应映射的实体类: import com.baomidou.mybatisplus.annotation.IdType ; import com.baomidou.mybatisplus.annotation. TableField ; import com.baomidou.mybatisplus.annotation. TableId ; import com.baomidou.mybatisplus.annotation. Tab

    2024年04月29日
    浏览(43)
  • vue下载pdf文件纯前端实现,不跳页面实现

    一、引入download.js npm install downloadjs 地址:https://www.npmjs.com/package/downloadjs 注意:使用download.js时下载的文件内容为该文件的url(url和filename参数有中文的话下载后的文件会损坏打不开,需要修改源码) 二、复制一份下载好的downloadjs 文件 , 修改后的源码

    2024年02月12日
    浏览(55)
  • HTML JS实现点击按钮下载文件功能例子(C知道版)

            其实这篇应该算是一篇“水”文章,为什么要这么“水”呢,除了最近南方的气候闷热难耐需要降温之外,另一个主要原因,这里面所写的代码均是由CSDN的AI文本大模型\\\"C知道\\\"完成,我在这里只是简单记录一下,也方便其他有需求的同学借鉴一下,少绕一些弯路(有

    2024年02月15日
    浏览(38)
  • 下载文件,自动获取后端返回文件名,并自动识别文件格式,如果是iso-8859-1编码转换utf-8

    点击下载文件按钮,获取后端返回接口,根据请求头自动解析文件名称,自动识别文件类型后缀名,如果中文是iso-8859-1格式转换为utf-8,否则下载不了.

    2024年02月07日
    浏览(49)
  • 究竟会不会阻塞?HTML文档渲染中的CSS和JS文件下载探秘

    在Web前端开发中,网页的性能优化一直是一个重要的课题。其中,优化网页的加载速度尤为关键。本文将探讨一个常见的问题:HTML文档渲染过程中,CSS文件和JS文件的下载是否会阻塞渲染,以及如何处理这个问题。 阻塞渲染的问题 在讨论之前,我们需要了解一些关键概念。

    2024年02月11日
    浏览(34)
  • .net core使用Html模板转PDF文件并下载的业务类封装

    前言:我这里文件下载的模板选型优先考虑html模板,上手容易,前后端通用,有了模板后就需要有转换了,html转PDF采用第三方包:DinkToPdf(1.0.8),下面是代码核心类:   重点:html转PDF的三方包有很多,我目前采用的是支持跨平台(windows和linux)的包源:DinkToPdf,这里提一嘴

    2024年02月09日
    浏览(94)
  • 功能需求-根据页面生成pdf,pdf不需要下载只需把文件流上传到服务器

    根据自身当下技术的水平和实际情况,做一个简单的记录。 在项目中有采购合同和销售合同,这些合同新建好之后都需要有人去审核,审核通过后需要把合同生成一个pdf文件然后后端给保存起来 在项目中有采购合同和销售合同,这些合同新建好之后都需要有人去审核,审核

    2024年02月13日
    浏览(44)
  • VUE: 将Json (后台返回的数据-list) 数据转换为Excel文件并实现前端下载

    1. 下载xlsx的包 2. vue中的写法 创建button的按钮,添加点击的函数 写函数 函数流程总体来说就是: 将json字符串书写写入文件,然后转换为blob的对象,之后通过文件流的方式传递给用户下载 其中的 jsonData 可以通过 axios 请求后端传递来的数据。

    2024年02月11日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包