react下绘制word申请表

最新推荐文章于 2024-06-04 16:25:45 发布
最新推荐文章于 2024-06-04 16:25:45 发布
阅读量1.9k 收藏 4
点赞数 2
分类专栏： 磕磕绊绊 文章标签： html react word申请表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Run_youngman/article/details/88648784
版权

背景

最近项目里有个需求，绘制一个word表格，就类似大学的时候填写的那种表格。

开门见山

为了不耽误大家时间，我先说结论，如果你的代码拿到react环境中参差不齐了，可能是你把colspan这个属性放到style里面了，然而这个属性属于标签的固有属性，放到style中是起不到作用的。

拿到这个需求之后我首先想到了tr,td的方式来绘制，然后绘制的效果大概是这样。
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>这是一个word模板</title>
</head>
<style type="text/css">
	body{
		width: 800px;
	}
	h2{
		margin:0 auto;
		text-align: center;
	}
	table{
		border-collapse:collapse;
		margin: 0 auto;
		text-align: center;
	}
	table p{
		display: inline-block;
		text-align: right;
		margin-top: 70px;
	}
</style>
<body>
	<h2>XXX</h2>
	<table border="1">
		<tr>
			<td height="60;" colspan="1" width="118px">XXX</td>
			<td colspan="3">XXX-XXX</td>
			<td colspan="1" width="118px">XXX</td>
			<td colspan="1">XXX</td>
		</tr>
		<tr>
			<td height="60;" align="center">XXX</td>
			<td colspan="3">XXX</td>
			<td >XXX</td>
			<td >王伟</td>
		</tr>
		<tr>
			<td height="60;" align="center">施工员</td>
			<td colspan="1">杨幂</td>
			<td>XXX</td>
			<td colspan="1">100</td>
			<td>XXX</td>
			<td >95</td>
		</tr>
		<tr>
			<td height="60" >XXX</td>
			<td colspan="5"> 国家2000 - ISO-9001</td>
		</tr>
		<tr>
			<td colspan="6" height="200">
				lskjdflsl快解放拉萨扩大金佛i极恶非理科生的积分来说点击发送i阿娥姐分厘卡三季稻法律是螺丝扣江东父老塞恩辣椒粉拉萨扩大金佛i额就立刻就啦快睡觉哦这拉开僵尸地方
			</td>
		</tr>
		<tr>
			<td height="60;" align="center">XXX</td>
			<td colspan="1">杨幂</td>
			<td>XXX</td>
			<td colspan="1">100</td>
			<td>XXX</td>
			<td >95</td>
		</tr>
		<tr>
			<td height="60;" align="center">XXX</td>
			<td colspan="1">杨幂</td>
			<td>XXX</td>
			<td colspan="1">100</td>
			<td>XXX</td>
			<td >95</td>
		</tr>
		<tr>
			<td colspan="6">XXX</td>
		</tr>
		<tr>
			<td>XXX</td>
			<td colspan="2">XXX</td>
			<td>XXX</td>
			<td colspan="2">XXX</td>
		</tr>
		<tr>
			<td height="110" >XXX</td>
			<td colspan="5">
				<div>
					<p>XXX：</p>
					<p style='margin-left:300px'>年</p>
					<p style='margin-left:30px'>月</p>
					<p style='margin-left:30px'>日</p>
				</div>
			</td>
		</tr>
		<tr>
			<td height="110" >XXX</td>
			<td colspan="5">
				<div>
					<p>XXX：</p>
					<p style='margin-left:300px'>年</p>
					<p style='margin-left:30px'>月</p>
					<p style='margin-left:30px'>日</p>
				</div>
			</td>
		</tr>
	</table>
	<div style="width:610px;margin:0 auto;">
		<p>注：附验收过程照片及说明</p>
		<p style="text-indent:2em;">2、本表解释权归XXXXXXXX。咨询电话：XXXXXXXX</p>
	</div>
</body>
</html>

但是，当我将这些代码融入到react环境中，大部分之前对的整整齐齐的栏变得扭扭歪歪，而且边框也消失了。直接告诉我是colspan这个属性没有起到作用。通过查阅资料，得到了如下答案。

  • < table >标签不能直接和< tr >标签直接接触，在中间可以添加一个< tbody >标签
  • < table >的border=1标签，要变成css属性是，给td标签添加css属性border:1px solid #000;
  • colspan 在react中要变成colSpan这样的驼峰式写法
  • 当然了，最重要的，colSpan拿到标签里面，<td colSpan="1">{name}</td>,width , height这两个属性倒是放到style里面或者标签里面都可以。

后续我还会写一篇使用antd中的row col来完成这一功能,使用这个功能会导致部分边框不重叠变粗的情况，文章中会附带解决方案。

Run_youngman
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react-利用React创建word文档
08-15
react-Haunted针对Web组件实现的ReactHooksAPI
React纯前端生成word文档（支持多图片导出）
热门推荐
qq_39107452的博客
11-27 2万+
React纯前端生成word文档（支持多图片导出）前言准备工作代码实现 前言 作为一个入职不就的前端小白来说，前段时间的项目中老大提了一个在我看来十分无理的需求，对！无理。他要求我用纯前端实现一个word文档导出功能，并且附模板。我当即就否决了他（这压根就触及到我知识盲区了…），随后他在长达两个半小时对我的思（hu）想（shuo）教（ba）育（dao）中。我当然是还是选择妥协了（毕竟自己老大我只能惯着啊…）。 准备工作 整个功能用到的相关技术还是比较多的，毕竟涉及到文件操作不是自己手撸封装的，自然得装不少轮
React实现在线预览word报告/本地选择报告预览
ZhaoYulin6的博客
06-04 836
react在线预览docx文件，并保留格式，包含保留目录调整等样式
redocx：with用React创建Word文档
02-03
重传 用React创建Word文档 介绍 redocx是一个库，可让您使用React创建Word文档。 它提供了一组组件，这些组件将您的声明性视图和组件呈现为word文档。 例 一个简单的组件，可将“ Hello World”文本呈现为word文档。 import React from 'react' import { render , Document , Text } from 'redocx' class App extends React . Component { render ( ) { return ( < Document> < T
HTML制作WORD表格
Maggieq8324的博客
09-09 3424
效果图 table属性 align：让内容居中，取值为left、right、center border：设置表格的边框 cellspacing：单元格与单元格之间的距离 bgcolor：表格的背景色 colspan：跨列数 rowspan：跨行数 HTML代码 <table class="table" style="width:100%;height:100%;border:1px so...
使用antd的Row、Col组件绘制word申请表
Run_youngman的博客
03-18 9396
背景 想到用Row,Col绘制word申请表，首先他的span属性调节可能更方便一些，而且整体使用起来也是React风格，避免了使用tr, td这种原生的标签带来一系列属性错误以及不兼容。 当然了我使用tr,td完成了一版，踩了一些坑，如果你想用这种方式，希望这篇文章可以帮到你。 开始coding 说一句，嫌啰嗦直接拉到最后，拷贝一下就能用。 当我一开始使用的时候JS文件代码是这样的。 <d...
React SVG绘制生态自然景观特效
06-24
本项目“React SVG绘制生态自然景观特效”利用SVG的优势，提供了用户点击按钮就能自动生成各种自然场景的特效，为Web应用增加了独特的用户体验。 首先，我们要理解React的基本概念。React是Facebook开发的一个用于...
React框架资源《word文档》
最新发布
07-07
React框架资源《word文档》 React框架资源可以大致分为以下几类： 一、官方文档与教程 React官方文档：React团队维护的官方文档是学习React框架的首选资源。最新的官方文档已经迁移到https://react.dev/。新文档...
React-RDoc是一套基于React的文档生成工具用于生成文档网站或简单的博客网站
08-14
RDoc 是一套基于React的文档生成工具，用于生成文档网站或简单的博客网站
react—表单
xun__xing的博客
04-21 399
表单一、表单1、value1.defaultValue2.onChange3.灵活使用2、checked 一、表单 受控组件和非受控组件 受控组件： 组件的使用者，有能力完全控制该组件的行为和内容。通常情况下，受控组件往往没有自身的状态，其内容完全收到属性的控制。 非受控组件： 组件的使用者，没有能力控制该组件的行为和内容，组件的行为和内容完全自行控制。 表单组件，默认情况下是非受控组件，一旦设置了表单组件的value属性，则其变为受控组件(单选和多选框需要设置checked) 1、value //app.
react--hello,word
weixin_30312563的博客
09-21 82
官网地址： https://facebook.github.io/react/ github地址： https://github.com/facebook/react 1.下载 http://facebook.github.io/react/downloads.html 2.hello word! 点击查看演示 代码如下： <!DOCTYPE html&...
JS操作Word生成表格
10-18
使用JS调用动态链接库操作WORD并绘制表格
纯前端生成word包含echarts和table
weixin_45289656的博客
07-22 1105
使用docxtemplater生成word，包含表格和echarts图表 首先要加载一下依赖 import PizZip from 'pizzip' import docxtemplater from 'docxtemplater' import JszipUtil from 'jszip-utils' import FileSave from 'file-saver' import echarts from "echarts" import ImageModule from 'docxtemplater-
React如何导出Word文件
TianXuab的博客
09-24 796
库，我们可以轻松地在React应用中实现导出Word文件的功能。只需几行代码，我们就可以创建一个具有导出按钮的组件，并将数据导出为Word文档。在React组件中，我们需要创建一个按钮，当用户点击该按钮时，将触发导出Word文件的操作。首先，我们需要安装一些必要的依赖包。的库，它提供了生成和编辑Word文档的功能。库来保存生成的Word文档，并使用。库来生成和编辑Word文档。在上面的代码中，我们使用了。
Javascript 前端生成Word文档
ArchBaal的博客
02-21 6260
最近做项目遇到要在Web上生成Word文件的需求。一般方案是用报表系统或者在后台生成。由于报表系统中生成的页面再转换成Word难以排版，这里就用前端生成的办法作为临时解决方案。直接上代码了，提供文字排版和表格设计，满足基本功能。如果需要其他功能，需要在Word上录制宏，再把代码转换成JS。 环境：只能是IE浏览器，使用ActiveXObject(“Word.Application”) <!D...
React学习笔记_realword
架构师的成长之路的博客
11-17 1747
一、normalizr 扁平化数据 保持状态扁平化 API 经常会返回嵌套资源。这在 Flux 或基于 Redux 的架构中处理起来会非常困难。我们推荐使用 normalizr 之类的库将数据进行扁平化处理，保持状态尽可能地扁平化。 例子: 典型的API调用返回数据： 文章信息文字信息中包含 作者信息、评论。 article: users and comments
react绘制导出word
新白的博客
11-11 3994
绘制word: 方法一、原生table融入 注意：（详情参考https://blog.csdn.net/Run_youngman/article/details/88648784） < table >标签不能直接和< tr >标签直接接触，在中间可以添加一个< tbody >标签 < table >的border=1标签，要变成css属性，给...
Web前端：2022年十大React表库
yueqian_edu的博客
04-18 237
表格是每个应用程序的关键组件，手动构建和样式表不再有效，因为有大量完全准备好的库可用于该功能。因此，我们利用这些库来简化我们的前端任务。
React学习day13--antd组件：Grid栅格
weixin_46758732的博客
06-26 2257
Grid栅格 https://ant.design/components/grid-cn/ 布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理： 1）通过 row 在水平方向建立一组 column（简写 col）。 2）你的内容应当放置于 col 内，并且，只有 col 可以作为 row 的直接元素。 3）栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 来创建。 4）如
在react中绘制echarts表格
06-02
要在React中绘制Echarts图表，需要安装E和React-Echarts两个依赖。 1. 首先安装Echarts和React-Echarts： ``` npm install echarts --save npm install react-echarts --save ``` 2. 引入React-Echarts组件： ```javascript import ReactEcharts from 'echarts-for-react'; ``` 3. 在组件中使用React-Echarts： ```javascript import React, { Component } from 'react'; import ReactEcharts from 'echarts-for-react'; class MyChart extends Component { render() { const option = { // Echarts配置项 title: { text: '柱状图' }, tooltip: {}, xAxis: { data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20, 10] }] }; return ( <ReactEcharts option={option} /> ); } } export default MyChart; ``` 4. 根据需要配置Echarts的option项，例如可以设置图表类型、数据、坐标轴等。 这样就可以在React中绘制Echarts图表了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值