所有前端导入导出方法集合:
前端必备技能知识:JS导出Blob流文件为Excel表格、Vue.js使用Blob的方式实现excel表格的下载(流文件下载)_勤动手多动脑少说多做厚积薄发-CSDN博客_js文件流导出excel表格效果:重点:a.download = '基础词库模板.xls'//这里最重要。如果不加后缀。保存的文件就会异常或者乱码。一定要写文件后缀类型 /** * 基础词库Excel导出、下载基础模板 */ exportBasicsLexiconExcel(){ this.$api .exportBasicsLexiconExcel() .then(res => { cons...https://blog.csdn.net/qq_22182989/article/details/121498487vuejs项目纯js导出word、在线下载富文本内容或者网页另存为word文件_勤动手多动脑少说多做厚积薄发-CSDN博客vuejs项目在线下载富文本内容或者网页另存为word文件这篇文章是保存为带有原本样式文件。如果想把网页内容保存为自定义格式的word文件。可以参考我的另一篇文章:https://blog.csdn.net/qq_22182989/article/details/122605879前端必备技能知识:vue.js操作excel表格,实现导入导出功能_勤动手多动脑少说多做厚积薄发-CSDN博客_vue前端导出excel导入导出都可以使用elementui 的组件。导入功能: <el-button type="primary" size="small" @click="uploadExcel"> <el-upload class="upload-excel" :action="actionUrl" accept="application/vnd.openxmlformats-officedocumehttps://blog.csdn.net/qq_22182989/article/details/121508652
vuejs项目前端纯js在线下载网页内容保存为自定义格式的word文件、另存为word文件_勤动手多动脑少说多做厚积薄发-CSDN博客这篇文章是把网页内容保存为自定义格式的word文件。如果想保存为带有原本样式文件。可以参考我的另一篇文章:https://blog.csdn.net/qq_22182989/article/details/122606713
https://blog.csdn.net/qq_22182989/article/details/123001810https://blog.csdn.net/qq_22182989/article/details/123001810
使用步骤
1.引入依赖包
代码如下(示例):
npm install file-saver --save
2.在下载页面导入
代码如下(示例):
import { saveAs } from 'file-saver'
3.在页面中可以定义一个html模板,也可以在全局写
4.在点击下载事件中,调用这个方法即可
说明:
如果是想下载:已有的页面结构的话。
直接使用:
const node = document.querySelector('.exportBox').innerHTML
去获取html结构即可。
如果没有页面结构。只有部分内容或者部分html结构的话。就需要自己手动拼接一个完整的html结构出来。比如这样:
<el-button @click="handleDown(scope.row)" type="text">下载</el-button>
handleDown(row){
let str = `
<h1> ${row.title}</h1>
<p><span> ${row.workingTeam} </span></p>
<p><span> ${row.updateTime} </span></p>
` + row.content
let htmlStr = `
<!DOCTYPE html>
<html lang="en">
<body style="font-family:方正仿宋_GBK;text-align: center;mso-ascii-font-family:'Times New Roman'">
${str}
</body>
</html>
`
const node = htmlStr
const html = this.getModelHtml(node,row)
const blob = new Blob([html], { type: 'application/msword;charset=utf-8' })
saveAs(blob, `${row.title}.doc`)
},
getModelHtml(mhtml,row) {
return `<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<!--[if gte mso 9]><xml><w:WordDocument><w:View>Print</w:View><w:TrackMoves>false</w:TrackMoves><w:TrackFormatting/><w:ValidateAgainstSchemas/><w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid><w:IgnoreMixedContent>false</w:IgnoreMixedContent><w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText><w:DoNotPromoteQF/><w:LidThemeOther>EN-US</w:LidThemeOther><w:LidThemeAsian>ZH-CN</w:LidThemeAsian><w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript><w:Compatibility><w:BreakWrappedTables/><w:SnapToGridInCell/><w:WrapTextWithPunct/><w:UseAsianBreakRules/><w:DontGrowAutofit/><w:SplitPgBreakAndParaMark/><w:DontVertAlignCellWithSp/><w:DontBreakConstrainedForcedTables/><w:DontVertAlignInTxbx/><w:Word11KerningPairs/><w:CachedColBalance/><w:UseFELayout/></w:Compatibility><w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel><m:mathPr><m:mathFont m:val="Cambria Math"/><m:brkBin m:val="before"/><m:brkBinSub m:val="--"/><m:smallFrac m:val="off"/><m:dispDef/><m:lMargin m:val="0"/> <m:rMargin m:val="0"/><m:defJc m:val="centerGroup"/><m:wrapIndent m:val="1440"/><m:intLim m:val="subSup"/><m:naryLim m:val="undOvr"/></m:mathPr></w:WordDocument></xml><![endif]-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>${row.title}</title>
</head>
<body>
<div style="display: flex;justify-content: center;">
${mhtml}
</div>
</body>
</html>`
},
参考: