所有前端导入导出方法集合：
前端必备技能知识：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-officedocume
https://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/123001810
https://blog.csdn.net/qq_22182989/article/details/123001810
使用步骤
这篇文章是把网页内容保存为自定义格式的word文件。
如果想保存为带有原本样式文件。可以参考我的另一篇文章：
1、安装依赖：
4个依赖：html-docx-js和 file-saver和 docxtemplater 和pizzip
npm install html-docx-js file-saver docxtemplater pizzip
2.引入：在同一个vue页面内引入即可：
import Docxtemplater from "docxtemplater"
import PizZip from "pizzip"
import PizZipUtils from "pizzip/utils/index.js"
import {saveAs} from "file-saver"
3、设置自定义下载模板
我们自定义下载模板需要专门在public目录下放一个模板文件。然后代码会自动给模板里的变量赋值。
我的模板是这样的：
保存之后的效果：
分析：
这个方法比较笨拙。只能下载文本格式的内容。但是如果模板是固定的。只是改变参数的话。用这个方法挺好的。我们可以把模板改成好看的样式即可。如果想下载图片或者文字带有样式的话。还是推荐文章开头推荐的那个方法。更智能一些。
像这种类型的需求：可以用这个方法
实例
下面是另一个单独页面。只要安装好了依赖。直接就可以复制在项目里使用：
<template>
<!-- 工作进展管理详情页 -->
<div class="detail-box" id="detail-box">
<el-page-header @back="goBack" class="top-back" content="详情页面">
</el-page-header>
<div class="inner-box">
<el-button @click="down()">xiazai</el-button>
<h1>{
{ contentData.title }}</h1>
<p><span>{
{ contentData.workGroup }}</span></p>
<p><span>{
{ contentData.date }}</span></p>
<div class="content-box" v-html="contentData.content"></div>
</div>
</div>
</template>
<script>
import Docxtemplater from "docxtemplater"
import PizZip from "pizzip"
import PizZipUtils from "pizzip/utils/index.js"
import {saveAs} from "file-saver"
function loadFile(url, callback) {
PizZipUtils.getBinaryContent(url, callback)
}
export default {
name: 'progressDetail',
data() {
return {
contentData: {
title: '标题标题标题标题标题标题标题标题标题标题',
workGroup: '工作组111',
content: '哈哈哈,
date: '2016-05-02 12:02:01'
}
}
},
components: {},
computed: {},
methods: {
goBack() {
this.$router.push('/progress/list')
},
down() {
console.log(this)
let self = this.contentData
loadFile(
"moban.docx",
function (error, content) {
if (error) {
throw error
}
const zip = new PizZip(content)
const doc = new Docxtemplater(zip, {
paragraphLoop: true,
linebreaks: true,
})
// render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)
doc.render({
title: self.title,
workGroup: self.workGroup,
date: self.date,
content: self.content,
})
const out = doc.getZip().generate({
type: "blob",
mimeType:
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
})
// Output the document using Data-URI
saveAs(out, "output.docx")
}
)
},
},
created() {
},
mounted() {
},
}
</script>
<style lang="less" scoped>
.detail-box {
width: 100%;
height: 100%;
background-color: #fff;
text-align: center;
.top-back, .inner-box {
padding: 1rem;
}
.inner-box {
.content-box {
}
}
}
</style>
参考：
Installation | docxtemplater
https://docxtemplater.com/docs/installation/#node