docxjs导出word宽度设置无效

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了docxjs导出word宽度设置无效相关的知识，希望对你有一定的参考价值。

docxjs导出word宽度设置无效
方法一仅用 FileSaver 一个js

外部直接引入js：代码如下
let contenthtml = `

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fu-title
width: 100%;
height: 5.31vw;
line-height: 5.31vw;
text-align: center;
font-family: '宋体';
font-size: 36px;
color: #fc3f3f;

</style>
</head>

<body>
<div class="fu logHistoryManage_detail">
<div class="fu-title">日志报表信息</div>
<form class="fu-form">
<table border="0" cellspacing="0">
<tr height="30" border='solid 1px red' style='color:#888'>
<td width="610" align="left">$sendDepartName ? sendDepartName : "ohqwzfw"</td>
<td width="610" align="center" ></td>
<td width="610" align="right">$sendUserName </td>
</tr>
</table>
<hr style='color:red;'/><br>

<div class="form-title" style="height: auto;">$title</div>
<div class="form-summary" style="word-wrap: break-word;">
$content ? content : ''

</div>
<br>
<!-- 领导批示 -->
<div>

<h2>领导批示</h2>
<table border="1" cellspacing="0">
<tr height="50">
<td width="200" align="center">姓名</td>
<td width="600" align="center">批示内容</td>
<td width="200" align="center">批示时间</td>
</tr>
$leaderIdeaList.length>0?leaderIdeaList.map((item, index) =>
return `
<tr height="100">
<td width="200" align="center">$item.optUserName</td>
<td width="600" align="center">$item.remark ? item.remark : '暂无内容'</td>
<td width="200" align="center">$item.createTime ? item.createTime : ''</td>
</tr>
`
):`<tr height="100">
<td width="200" align="center"></td>
<td width="600" align="center"></td>
<td width="200" align="center"></td>
</tr> `


</table>
</div>

</form>
</div>
</body>

</html>

`

//重要的代码就这两行----这里是项目中没有npm包管理外部直接引用的js
let blob = new Blob([contentHtml], type: "application/msword;charset=utf-8" );
saveAs(blob, "日志报表信息.docx");
复制

使用包管理安装 FileSaver
首先需要安装：fileSaver

import FileSaver from 'file-saver';
import htmlDocx from "html-docx-js/dist/html-docx"
import G from '@/global';
const rootUrl, rbacToken = G;
let cycle_info1 = [

name: '事件类型',
key: 'eventTypeName',
,

name: '地点定位',
key: 'locationAddress',
,

name: '上报时间',
key: 'reportTime',
,

name: '人员姓名',
key: 'reportUserName',
,

name: '联系方式',
key: 'reportUserPhone',
,
]

const model = (reportInfoDetail: any, list: any, eventState: any) =>
// console.log(reportInfoDetail, list, eventState);

return (
`
<!DOCTYPE html>
<html>

<head>
<style>
.MaxBox
padding: 0px 15px;
overflow-y: auto;
height: 50vh;


.fromBox

.formTitle_first
color: #1c69f7;
font-size: 23px;
font-weight: bold;
margin-bottom: 10px;


.formTitle_second
font-weight: bold;
font-size: 16px;
margin-bottom: 10px;


.formContent_box
margin-bottom: 5px;


.formContent_box_title
min-width: 60px;


.display_flex
display: flex;

</style>
</head>

<body>
<div class="MaxBox">
<div class="fromBox">
<div class="formTitle_first">上报信息</div>
<div class="formTitle_second">上报信息</div>
<div class="formContent_box display_flex" style="display:flex">
<span class="formContent_box_title" >事件类型：</span>
<span>$reportInfoDetail['eventTypeName']</span>
</div>
<div class="formContent_box display_flex" style="display:flex">
<span class="formContent_box_title">地点定位：</span>
<span>$reportInfoDetail['locationAddress']</span>
</div>
<div class="formContent_box display_flex" style="display:flex">
<span class="formContent_box_title">上报时间：</span>
<span>$reportInfoDetail['reportTime']</span>
</div>
<div class="formContent_box display_flex" style="display:flex">
<span class="formContent_box_title">人员姓名：</span>
<span>$reportInfoDetail['reportUserName']</span>
</div>
<div class="formContent_box display_flex" style="display:flex">
<span class="formContent_box_title">联系方式：</span>
<span>$reportInfoDetail['reportUserPhone']</span>
</div>

<div class="formTitle_second">图片附件</div>
<div class="formContent_box">
$reportInfoDetail['picIds']?.map((res1: any, idx1: any) =>
return `
<img width='240' height='160' src="$rootUrl/fyVolunteer/file/download/$res1?rbacToken=$rbacToken"
style='margin-right:5px'
/>
$((idx1 + 1) % 2 == 0) ? `<br />` : ''
`
)

</div>
<div class="formTitle_second">事件描述</div>
<div class="formContent_box">$reportInfoDetail['description']</div>
</div>
$reportInfoDetail.assignInfo.length != 0 ?
`
<div class="fromBox">
<div class="formTitle_first">指派信息</div>
<div class="formTitle_second display_flex">指派信息</div>
<div class="formContent_box">
<div class="formContent_box_title">指派单位：
$reportInfoDetail.assignInfo.map((res: any, idx: any) =>
return `
<span style="margin-right:15px">
$res.departmentName
</span>
`
)

</div >
</div >
<div class="formContent_box display_flex">
<span class="formContent_box_title">指派时间：</span>
<span>$!!reportInfoDetail?.assignInfo[0]?.assignTime ? reportInfoDetail?.assignInfo[0]?.assignTime : ""</span>
</div>
</div>
`: ''



<div class="fromBox">
<div class="formTitle_first">处置信息</div>
$reportInfoDetail.handleInfo.length != 0 ?
reportInfoDetail.handleInfo.map((itm: any, idx: any) =>
return `
<div class="formTitle_second">单位$idx + 1：$itm['claimDepartmentName']</div>
<div class="formTitle_second">签收信息</div>
<div class="formContent_box display_flex"
style="width:32vw;justify-content: space-between;">
<div>
<span>签收单位：$itm['claimDepartmentName']</span>
</div>
<div>
<span>签收时间：$itm['claimTime']</span>
</div>
</div >
<div class="formTitle_second">图片附件</div>
<div class="formContent_box">
$itm['handleTime'] != null ?
itm['handlePicIds']?.map((res1: any, idx1: any) =>
return `
<img width="240" height="160"
src="$rootUrl/fyVolunteer/file/download/$res1?rbacToken=$rbacToken"
style="margin-right:5px"
/>
$(idx1 + 1) % 2 == 0 ? `<br />` : ''
`
) : `<span style="color:#5558e8">无</span>`

</div>

<div class="formTitle_second">处置描述</div>
<div class="formContent_box">$itm.handleTime != null ? itm['handleDescription'] : `<span style="color:#5558e8">未上传处置</span>`</div>

<div class="formTitle_second">上报信息</div>
<div class="formContent_box display_flex"
style="width:32vw;justify-content: space-between;">
<div>
<span>上报单位：$itm['claimDepartmentName']</span>
</div>
<div>
<span>上报时间：$itm['handleTime'] != null ? itm['handleTime'] : ''</span>
</div>
</div>
<br/>
`
) : '无数据'

</div >

<div class="fromBox">
<div class="formTitle_first">其他信息</div>

<div class="formContent_box display_flex">
<span class="formContent_box_title">信息状态：</span>
<span>
$list[eventState - 1].desc
$reportInfoDetail?.finishTime != null ? reportInfoDetail?.finishTime : ''
</span>
</div>
<div class="formContent_box display_flex">
<span class="formContent_box_title">采纳状态：</span>
<span>$reportInfoDetail.acceptInfo == null ? "未采纳" : `已采纳($reportInfoDetail.acceptInfo.integral)`</span>
</div>
</div>
</div >
</body >
</html >
`
)


const loadFile = (info: any) =>
let html = model(info.reportInfoDetail, info.list, info.eventState)
let blob = new Blob([html], type: "application/msword;charset=utf-8" );
// let blob = htmlDocx.asBlob(html, orientation: "landscape" );
FileSaver.saveAs(blob, "信息管理文件.doc");


export
loadFile
;

复制

方法二：
两个js都需要引入，还需要引入jquery.js,最好1.8版本以上的

原理和那个差不多，只是理解起来比较简单，代码如下
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 注意引入的顺序 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src='./jquery.wordexport.js'></script>
<style>
.word-export,.test
display: block;
padding: 10px;
width: 80px;
background-color: rgb(56, 131, 230);

</style>

<body>
<span class="word-export">导出word</span>
<div id="page-content2" style="display:flex;justify-content:space-between;">
<div id="page-content">
jquery 测试
</div>
<div id="page-content1">
jquery 测试
</div>
</div>

<script type="text/javascript">

$(".word-export").click(function (event)
// 打印节点就可以
$("#page-content2").wordExport("测试");
);

</script>

</body>

</html>
复制 参考技术A docxjs导出word宽度设置无效？
答案如下：调整设置宽度！第一步首先打开设置，第二步账号管理在页面，最后点击账号安全中心进入。多尝试操作，解决问题！

DIV的宽度和高度在外部CSS时候设置无效?

我在本页面<div style="background-image:url(images/heisebeijing75.png); width:500px; height:500px; color:#FC0; padding:20px;">这样设置DIV宽度和高度就有效，可是通过<link href="">连接外部CSS方式就无效（css里面的代码和上面是一样的），这是怎么回事？

不会吧，你是不是哪里写错了。
首先，确认连接代码对不对，假设你的外部文件是css.css，连接代码<link href="css.css" rel="stylesheet" type="text/css" />还要看看文件路径对不对。
再在css.css文件里写上divbackground-image:url(images/heisebeijing75.png); width:500px; height:500px; color:#FC0; padding:20px;因为你没有给div取类名或者id名，所以这里用了标签选择器追问

我有啊。CSS里的字体颜色应用都有效。我是在DW中写。测试的时候却没有效。我写了ID名，感觉用外部链接之后就有时有用有时没用，比如我定义p.mm1cursor:help;,然后我引用的时候有时候有用，有时候一直没用。不然就要等很久，晕。这种问题怎么解决？

追答

在一个样式表里写的话，你要看是不是其他地方也设置了那个选择器的样式，因为你的css如果是行内样式，就是写在html里那种，它的级别是最高的，所以和别的样式冲突他也会执行，但是如果是写在一个已经有别的css的样式表里，就要注意代码的级别问题和先后顺序问题，你可以用火狐的firebug插件看看 ，你那段代码有没有执行或者冲突。
cursor的属性有些浏览器不支持的。
不知道你说等很久是什么意思。

追问

我说的等很久意思是比如我在CSS里改了一个WIDTH，把他变了很短，可是测试却没变化。不然就要刷新很多次才会显示修改之后的内容。不懂是不是浏览器缓存的关系。在DW里看效果是一修改就变化。按F12测试就是没变化，现在还在初学状态呵呵。很多东西都不懂，听你这样说思路是渐渐清晰了。我就是想问：无乱是内部样式还是外部样式，只要内部样式的内容有效，拿到外部样式也一样有效是吧？换句话说就是CSS代码放的地方不一样就是了？

追答

是的。所谓css就是层叠样式表的意思，你只要理清了代码的层叠关系，级别高低，代码先后（因为一样的代码后面会覆盖前面的），这些都理解清楚了代码放在哪里效果都是一样可以实现的。至于3种方式的优劣好处我就不赘述了

 参考技术A 原因有可能：
1、link的完整为<link href="css.css" rel="stylesheet" type="text/css" />；
2、link中css文件的路径是错误的；
3、优先权问题，有可能是被你html的样式给覆盖掉了；
4、样式文件和html的编码问题；
5、样式文件内存在书写问题，或者不完整，或者注释用了中文；
6、待发现... 参考技术B <link type="text/css" rel="stylesheet" href="style.css" />

你检查一下你这个有没有写错呢。还有href的链接指向地址是否是有效地址。 参考技术C 注意优先级 很可能被外部css中 别的样式取代

以上是关于docxjs导出word宽度设置无效的主要内容，如果未能解决你的问题，请参考以下文章

javascript导出word对word进行排版！急！！！

Pandoc：设置导出的 Word docx 的语言

JAVA 导出WORD的问题

用JavaScript导出当前页面的word文档怎么做

java用iText导出word文档

docx4j导出word文档，有表格，如何固定word表格列宽，