js导出word

2023-03-23 13:16:02JavaScript029

js导出word,第1张

前端拿到服务端数据生成 word 、excel 、pdf ,并导出或预览，此处为导出word 参考地址3. jszipJSZip 是一个用于创建、读取和编辑 .zip 文件的 javascript 库，具有可爱而简单的 API。 4. FileSaver它可以利用新流的强大功能将数据异步直接保存到硬盘驱动器应用程序接口。这将支持进度、取消和知道何时完成写作 FileSaver.js 是在客户端保存文件的解决方案，非常适合在客户端生成文件的 Web 应用程序 saveAs() 地址)

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>

复制

具体方法如下：

<HTML>

<HEAD>

<title>WEB页面导出为EXCEL文档的方法

</title>

</HEAD>

<body>

<BR>

<table id = "PrintA" width="100%" border="1" cellspacing="0"

cellpadding="0" bgcolor = "#61FF13">

</TR>

<TR>

<font color="BLUE" face="Verdana">单元格合并行A</FONT>

</TD>

</TR>

</TABLE>

<BR>

<table id="PrintB" width="100%" border="1" cellspacing="0"

cellpadding="0">

</TR>

<TR>

<TD colSpan=4 style="text-align : center">单元格合并行B</TD>

</TR>

</TABLE>

<input type="button" onclick="javascript:AllAreaWord()"

value="导出页面指定区域内容到Word">

<input type="button" onclick="javascript:AllAreaExcel()"

value="导出页面指定区域内容到Excel">

<input type="button" onclick="javascript:CellAreaExcel()"

value="导出表单单元格内容到Excel">

//指定页面区域内容导入Excel

function AllAreaExcel()

{

var oXL = new ActiveXObject("Excel.Application")

var oWB = oXL.Workbooks.Add()

var oSheet = oWB.ActiveSheet

var sel=document.body.createTextRange()

sel.moveToElementText(PrintA)

sel.select()

sel.execCommand("Copy")

oSheet.Paste()

oXL.Visible = true

}

//指定页面区域“单元格”内容导入Excel

function CellAreaExcel()

{

var oXL = new ActiveXObject("Excel.Application")

var oWB = oXL.Workbooks.Add()

var oSheet = oWB.ActiveSheet

var Lenr = PrintA.rows.length

for (i=0i<Lenri++)

{

var Lenc = PrintA.rows(i).cells.length

for (j=0j<Lencj++)

{

oSheet.Cells(i+1,j+1).value = PrintA.rows(i).cells(j).innerText

}

oXL.Visible = true

}

//指定页面区域内容导入Word

function AllAreaWord()

{

var oWD = new ActiveXObject("Word.Application")

var oDC = oWD.Documents.Add("",0,1)

var oRange =oDC.Range(0,1)

var sel = document.body.createTextRange()

sel.moveToElementText(PrintA)

sel.select()

sel.execCommand("Copy")

oRange.Paste()

oWD.Application.Visible = true

//window.close()

}

</SCRIPT>

</body>

</html>

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

# 上一篇：Python视频教程，百度云

# 下一篇：电脑拼图怎么拼图电脑拼图如何拼图

推荐阅读

热门文章

最新发布

标签列表

js导出word

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