vuejs项目前端纯js在线下载网页内容保存为自定义格式的word文件、另存为word文件_vue3js下载docx

所有前端导入导出方法集合：

前端必备技能知识：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

使用步骤

这篇文章是把网页内容保存为自定义格式的word文件。

如果想保存为带有原本样式文件。可以参考我的另一篇文章：

https://blog.csdn.net/qq_22182989/article/details/122605879https://blog.csdn.net/qq_22182989/article/details/122605879

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 | docxtemplaterhttps://docxtemplater.com/docs/installation/#node

 Vuejs Docxtemplater Example - StackBlitzhttps://stackblitz.com/edit/vuejs-docxtemplater-example?file=button.component.js

vue项目导出word - 简书一、需要的js依赖 实现此功能需要使用到docxtemplater、jszip-utils、jszip、FileSaver等js文件 1、docxtemplater 介绍 d...https://www.jianshu.com/p/b3622d6f8d98