docxjs导出word宽度设置无效

2023-04-29 17:46:02JavaScript082

docxjs导出word宽度设置无效,第1张

docxjs导出word宽度设置无效

方法一仅用 FileSaver 一个js

外部直接引入js：代码如下

let contentHtml = `

<!DOCTYPE html>

<head>

<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-title">日志报表信息</div>

<td width="610" align="left">${sendDepartName ? sendDepartName : "ohqwzfw"}</td>

<td width="610" align="right">${sendUserName} </td>

</tr>

</table>

<div class="form-title" style="height: auto">${title}</div>

${content ? content : ''

}

</div>

<br>

<div>

</tr>

${leaderIdeaList.length>0?leaderIdeaList.map((item, index) =>{

return `

<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">

</tr>`

}

</table>

</div>

</form>

</div>

</body>

</html>

//重要的代码就这两行----这里是项目中没有npm包管理外部直接引用的js

let blob = new Blob([contentHtml], { type: "application/mswordcharset=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 = [

{

key: 'eventTypeName',

{

key: 'locationAddress',

{

key: 'reportTime',

{

key: 'reportUserName',

{

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>

<span>${reportInfoDetail['eventTypeName']}</span>

</div>

<span>${reportInfoDetail['locationAddress']}</span>

</div>

<span>${reportInfoDetail['reportTime']}</span>

</div>

<span>${reportInfoDetail['reportUserName']}</span>

</div>

<span>${reportInfoDetail['reportUserPhone']}</span>

</div>

${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="formContent_box">${reportInfoDetail['description']}</div>

</div>

${reportInfoDetail.assignInfo.length != 0 ?

<div class="formContent_box_title">指派单位：

${reportInfoDetail.assignInfo.map((res: any, idx: any) =>{

return `

${res.departmentName}

</span>

})

}

</div >

<span>${!!reportInfoDetail?.assignInfo[0]?.assignTime ? reportInfoDetail?.assignInfo[0]?.assignTime : ""}</span>

</div>

`: ''

}

${reportInfoDetail.handleInfo.length != 0 ?

reportInfoDetail.handleInfo.map((itm: any, idx: any) =>{

return `

<div class="formTitle_second">单位${idx + 1}：${itm['claimDepartmentName']}</div>

<div class="formContent_box display_flex"

style="width:32vwjustify-content: space-between">

<div>

<span>签收单位：${itm['claimDepartmentName']}</span>

</div>

<div>

<span>签收时间：${itm['claimTime']}</span>

</div>

</div >

${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="formContent_box">${itm.handleTime != null ? itm['handleDescription'] : `<span style="color:#5558e8">未上传处置</span>`}</div>

<div class="formContent_box display_flex"

style="width:32vwjustify-content: space-between">

<div>

<span>上报单位：${itm['claimDepartmentName']}</span>

</div>

<div>

<span>上报时间：${itm['handleTime'] != null ? itm['handleTime'] : ''}</span>

</div>

<br/>

}) : '无数据'

}

</div >

<span>

${list[eventState - 1].desc}

${reportInfoDetail?.finishTime != null ? reportInfoDetail?.finishTime : ''}

</span>

</div>

<span>${reportInfoDetail.acceptInfo == null ? "未采纳" : `已采纳(${reportInfoDetail.acceptInfo.integral})`}</span>

</div>

</div >

</body >

</html >

)

}

const loadFile = (info: any) =>{

let html = model(info.reportInfoDetail, info.list, info.eventState)

let blob = new Blob([html], { type: "application/mswordcharset=utf-8" })

// let blob = htmlDocx.asBlob(html, { orientation: "landscape" })

FileSaver.saveAs(blob, "信息管理文件.doc")

}

export {

loadFile

}

复制

方法二：

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

原理和那个差不多，只是理解起来比较简单，代码如下

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.word-export,.test {

display: block

padding: 10px

width: 80px

background-color: rgb(56, 131, 230)

}

</style>

<body>

<span class="word-export">导出word</span>

jquery 测试

</div>

jquery 测试

</div>

$(".word-export").click(function (event) {

// 打印节点就可以

$("#page-content2").wordExport("测试")

})

</script>

</body>

</html>

复制

1、首先，打开计算机，然后打开JS，在其中创建一个HTML文件“test”。

2、然后将HTML框架添加到测试文件中。

3、然后添加两个输入，一个是button，另一个是file将ID设置为“open”样式类型为“display：None”并且不显示。

4、打开后，仅显示此“打开文件”按钮。

5、现在将onclick事件添加到按钮，并调用openfile来触发ID为“open”的文件。

6、现在单击浏览器中的“打开文件”就会弹出选择文件路径对话框。

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：css中怎么样将文字放在一条横线中间

# 下一篇：如何用python编写一个简易的随机点名软件

推荐阅读

热门文章

最新发布

标签列表

docxjs导出word宽度设置无效

给您推荐相同类型的内容：