精华内容
下载资源
问答
  • vue导出word

    2021-04-13 17:50:12
    vue导出word 需求:导出work电子存档 第一步、安装依赖 cnpm install docxtemplater pizzip --save-dev cnpm install jszip-utils --save cnpm install jszip --save cnpm install file-saver --save 第二步、引入...

    需求:导出work电子存档

    第一步、安装依赖

    cnpm install docxtemplater pizzip --save-dev
    cnpm install jszip-utils --save 
    cnpm install jszip --save
    cnpm install file-saver --save
    

    第二步、引入依赖

    <template>
    	<p @click="exportWord">导出并下载word</p>
    </template>
    

    在需要导出word的vue文件中引入依赖

    <script>
    // 引入上面安装的四个依赖
    import docxtemplater from 'docxtemplater'
    import PizZip from 'pizzip'
    import JSZipUtils from 'jszip-utils'
    import {saveAs} from 'file-saver'
    export default {
      name: 'HelloWorld',
      data() {
        return {
          dataList: [
            {
              componeny: '公司名称',
              year: '2020-01-04',
              jiDu: 'yi'
            }
          ]
        }
      },
    
      methods: {
        exportWord() {
          var _this = this;
          // 读取并获得模板文件的二进制内容
          JSZipUtils.getBinaryContent("/template.docx", function(error, content) {
            console.log('开始', error, content)
            // template.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据
            // 抛出异常
            if (error) {
              throw error;
            }
    
            // 创建一个PizZip实例,内容为模板的内容
            let zip = new PizZip(content);
            // 创建并加载docxtemplater实例对象
            let doc = new docxtemplater().loadZip(zip);
            console.log('zip', zip, doc)
            // 设置模板变量的值
            let docxData = {
              componeny: _this.dataList[0].componeny,
              year: _this.dataList[0].year,
              num: _this.dataList[0].jiDu, // 注意:num,year,componeny与模板中的变量名相对应才能取到值
            };
            doc.setData({
              ...docxData
            });
    
            try {
              // 用模板变量的值替换所有模板变量
              doc.render();
            } catch (error) {
              // 抛出异常
              let e = {
                message: error.message,
                name: error.name,
                stack: error.stack,
                properties: error.properties
              };
              console.log(JSON.stringify({ error: e }));
              throw error;
            }
    
            // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
            let out = doc.getZip().generate({
              type: "blob",
              mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
            });
            // 将目标文件对象保存为目标类型的文件,并以docxData.year的值命名
            saveAs(out, docxData.year+".docx");
          });
        },
      }
    }
    </script>
    

    第三步、添加word模板

    先使用word制作出模板,数据使用{变量}代替。我的demo模板如下:
    在这里插入图片描述
    然后将模板文件放到项目中,这里路径要特别说明一下,因为我也入了这个坑:-I。
    建议将模板文件放在静态文件管理的文件夹中,比如cli2.0的static中,我的demo中是cli4.0的public中
    在这里插入图片描述
    最终下载结果:
    在这里插入图片描述

    ----------------------------------------------分割线----------------------------------------------
    期间碰到一个报错提示:
    在这里插入图片描述
    查了一下资料说是引入的模板文件路径有问题:

    JSZipUtils.getBinaryContent("/public/template.docx", function(error, content) {}
    改为
    JSZipUtils.getBinaryContent("/template.docx", function(error, content) {}
    阿弥陀佛善哉善哉…然后就正常下载下来啦。

    本人也是头一次碰到这种需求,一般来说都是后端来制作文档或者表格,但是我就是尝试着前端搞一下。
    嘻嘻,在此记录一下成果。如果错误欢迎留言指正。

    展开全文
  • vue3.0 word导出

    2021-07-21 16:03:53
    vue3.0 word导出安装引入添加点击事件js部分 安装 npm install --save file-saver 用于保存文件 引入 import FileSaver from 'file-saver' 添加点击事件 <el-button type="danger" @click="outexcel()">导出...

    安装

    npm install --save file-saver
    

    用于保存文件

    引入

    import FileSaver from 'file-saver'
    

    添加点击事件

    <el-button type="danger" @click="outexcel()">导出文件</el-button>
    

    js部分

    //导出文件
    			function outexcel() {
    			//后台获取导出数据
    				proxy.$axios({
    					url: urla + 'Code/derive',
    				}).then((res) => {
    					// console.log(res);
    					let blob = new Blob([res.data], {
    					type: `application/msword` //word文档为msword,pdf文档为pdf
    					});
    					let objectUrl = URL.createObjectURL(blob);
    					let link = document.createElement("a");
    					let fname = '导出二维码'; //下载文件的名字
    					link.href = objectUrl;
    					link.setAttribute("download", fname);
    					document.body.appendChild(link);
    					link.click();
    
    				})
    			}
    
    展开全文
  • vue导出word功能

    2021-01-25 17:32:04
    maintenance_word_template(word模板)

    一、需要安装的JS依赖

    实现此功能需要使用到docxtemplater、jszip-utils、jszip、FileSaver等js文件;

    1、docxtemplater

    介绍

    docxtemplater是一种邮件合并工具,它以编程方式使用,处理条件、循环,并且可以扩展为表格、HTML、图像等。

    参考链接:

    https://docxtemplater.readthedocs.io/en/latest/index.html

    用到的API

    • new window.docxtemplater:
      创建docxtemplater实例对象,返回一个新的docxtemplater对象

    • loadZip(zip):
      docxtemplater对象加载zip实例
      注意:必须从jszip的2.x版本向该方法传递一个zip实例

    • setData(Tags):
      设置模板变量的值

    • render():
      此函数用模板变量的值替换所有模板变量

    • getZip():
      此函数返回代表docxtemplater对象的zip

    2、jszip-utils

    介绍

    jszip-utils是与jszip一起使用的跨浏览器的工具库

    参考链接:

    https://stuk.github.io/jszip-utils/

    用到的API

    • getBinaryContent():
      读取并获得模板文件的二进制内容

    3、jszip

    介绍

    jszip是一个用于创建、读取和编辑.zip文件的JavaScript库,且API的使用也很简单。

    参考链接:

    https://stuk.github.io/jszip/

    用到的API

    • new JSZip():
      创建一个JSZip实例
    • generate():
      此函数可以生成一个zip文件(不是一个真实的文件,而是在内存中的表示)

    4、FileSaver

    介绍

    FileSaver.js 是在客户端保存文件的解决方案,非常适合需要生成文件,或者保存不应该发送到外部服务器的敏感信息的应用。

    参考链接:

    https://www.cnblogs.com/yunser/p/7629399.html
    https://www.npmjs.com/package/file-saver

    用到的API

    • saveAs(blob, “1.docx”):
      将目标文件对象保存为目标类型的文件,并命名

    二、实现步骤

    1、完成word模板

    首先,根据需要导出的word文件的要求,先使用word制作出模板,数据使用{变量}
    代替。如下图:

    maintenance_word_template(word模板)
    注:maintenance_word_template(word模板)

    注意:

    模板文件推荐放在静态目录文件下。
    使用vue-cli2的时候,放在static目录下。使用vue-cli3的时候,放在public目录下。
    因为我在使用的时候,放入.vue文件的同级目录下,发现会读不到模板。

    2、写出页面模板

    页面代码:

    <template>
      <!--  知识库 -->
      <div class="app-container">
        <div class="common-container">
          <div class="customise-table-title">{{tableTitle}}</div>
          <el-row class="filter-container" type="flex" justify="space-between">
            <el-col class="filter-btn-container" :span="6">
              <el-button class="filter-item customise-primary-btn" style="margin-left: 10px;" type="primary" icon="el-icon-download"
                @click="downLoadData" :loading="downLoading">导出word</el-button>
            </el-col>
          </el-row>
          <div class="table-box" v-if="reportData">
            <el-row class="row-item">
              <span>{{reportData.reportTitle}}</span>
            </el-row>
            <el-row class="row-item">
              <el-col :span="4">
                时间:
              </el-col>
              <el-col :span="20">
                <div style="margin-right: 250px;">
                   {{reportData.reportTime}}
                </div>
              </el-col>
            </el-row>
            <el-row class="row-item">
              <el-col :span="24">
                系统巡检记录
              </el-col>
            </el-row>
            <!-- 第一行 -->
            <el-row class="row-item">
              <el-col :span="4">
                服务器硬件设备巡检:
              </el-col>
              <el-col :span="4">
                {{reportData.systemHardware}}
              </el-col>
              <el-col :span="4">
                服务器软件巡检:
              </el-col>
              <el-col :span="4">
                {{reportData.systemSoftware}}
              </el-col>
              <el-col :span="4">
                安全防护软件巡检:
              </el-col>
              <el-col :span="4">
                {{reportData.systemSafety}}
              </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row class="row-item">
              <el-col :span="4">
                存储设备巡检:
              </el-col>
              <el-col :span="4">
                {{reportData.systemStorage}}
              </el-col>
              <el-col :span="4">
                UPS巡检:
              </el-col>
              <el-col :span="4">
                {{reportData.systemUps}}
              </el-col>
              <el-col :span="4">
                网络设备巡检:
              </el-col>
              <el-col :span="4">
                {{reportData.systemNetwork}}
              </el-col>
            </el-row>
            <!-- 第三行 -->
            <el-row class="row-item">
              <el-col :span="4">
                服务进程巡检:
              </el-col>
              <el-col :span="4">
                {{reportData.systemServiceProcess}}
              </el-col>
              <el-col :span="4">
                &nbsp;
              </el-col>
              <el-col :span="4">
                &nbsp;
              </el-col>
              <el-col :span="4">
                &nbsp;
              </el-col>
              <el-col :span="4">
                &nbsp;
              </el-col>
            </el-row>
            <!-- 建筑巡检管理 -->
            <el-row class="row-item">
              <el-col :span="24">
                建筑巡检管理
              </el-col>
            </el-row>
            <!-- 第一行 -->
            <el-row class="row-item">
              <el-col :span="4">
                巡检数:
              </el-col>
              <el-col :span="4">
                {{reportData.buildInspection}}
              </el-col>
              <el-col :span="4">
                巡检花费时间:
              </el-col>
              <el-col :span="4">
                {{reportData.buildInspectionSpendTime}}
              </el-col>
              <el-col :span="4">
                巡检正常:
              </el-col>
              <el-col :span="4">
                {{reportData.buildInspectionNormal}}
              </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row class="row-item">
              <el-col :span="4">
                巡检异常:
              </el-col>
              <el-col :span="4">
                {{reportData.buildInspectionAbnormal}}
              </el-col>
              <el-col :span="4">
              </el-col>
              <el-col :span="4">
              </el-col>
              <el-col :span="4">
              </el-col>
              <el-col :span="4">
              </el-col>
            </el-row>
            <!-- 报修处理管理 -->
            <el-row class="row-item">
              <el-col :span="24">
                报修处理管理
              </el-col>
            </el-row>
            <!-- 第一行 -->
            <el-row class="row-item">
              <el-col :span="4">
                收到报修单数:
              </el-col>
              <el-col :span="4">
                {{reportData.alarmDealNum}}
              </el-col>
              <el-col :span="4">
                未接单:
              </el-col>
              <el-col :span="4">
                {{reportData.alarmDealNotReceivedOrder}}
              </el-col>
              <el-col :span="4">
                已接单:
              </el-col>
              <el-col :span="4">
                {{reportData.alarmDealReceivedOrder}}
              </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row class="row-item">
              <el-col :span="4">
                维修中:
              </el-col>
              <el-col :span="4">
                {{reportData.alarmDealUnderRepair}}
              </el-col>
              <el-col :span="4">
                完成待确认:
              </el-col>
              <el-col :span="4">
                {{reportData.alarmDealConfirmed}}
              </el-col>
              <el-col :span="4">
                维修完成:
              </el-col>
              <el-col :span="4">
                {{reportData.alarmDealComplete}}
              </el-col>
            </el-row>
          </div>
          <div class="table-null" v-else>
            暂无报告
          </div>
        </div>
        <!-- 新增,修改弹窗 -->
      </div>
    </template>
    

    页面效果:

    在这里插入图片描述
    3、script代码

      import Moment from 'moment'
      import JSZip from 'jszip'
      import JSZipUtils from 'jszip-utils';
      import docxtemplater from 'docxtemplater';
      import PizZip from 'pizzip';
      import {
        saveAs
      } from 'file-saver';
          
            form: {
              reportTitle: undefined,
              reportTime: undefined,
              systemHardware: undefined,
              systemSoftware: undefined,
              systemSafety: undefined,
              systemStorage: undefined,
              systemUps: undefined,
              systemNetwork: undefined,
              systemServiceProcess: undefined,
              buildInspection: undefined,
              buildInspectionSpendTime: undefined,
              buildInspectionNormal: undefined,
              buildInspectionAbnormal: undefined,
              alarmDealNum:undefined,
              alarmDealNotReceivedOrder:undefined,
              alarmDealReceivedOrder:undefined,
              alarmDealUnderRepair:undefined,
              alarmDealConfirmed:undefined,
              alarmDealComplete:undefined,
            }  // 请求的数据对form赋值
            
      downLoadData() {
        if (!Boolean(this.form.reportTitle)) {
          this.$message.error('请先查询!')
        } else {
          this.downLoading = true;
          // 读取并获得模板文件的二进制内容
          let _this = this;
          JSZipUtils.getBinaryContent("/word/maintenance_word_template.docx", function(error, content) {
            // maintenance_word_template.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据
            // 抛出异常
            if (error) {
              throw error;
            }
            let zip = new PizZip(content);
            let doc = new docxtemplater().loadZip(zip);
            doc.setData({
              ..._this.form,
            });
    
            try {
              // 用模板变量的值替换所有模板变量
              doc.render();
            } catch (error) {
              // 抛出异常
              let e = {
                message: error.message,
                name: error.name,
                stack: error.stack,
                properties: error.properties
              };
              throw error;
            }
            // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
            let out = doc.getZip().generate({
              type: "blob",
              mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
            });
            let title = _this.form.reportTitle + ".docx";
            // 将目标文件对象保存为目标类型的文件,并命名
            saveAs(out, title);
            _this.downLoading = false;
          });
        }
      },
    

    4、测试结果

    在这里插入图片描述

    原文链接:https://www.jianshu.com/p/b3622d6f8d98

    展开全文
  • vue导出word文档

    2021-08-21 16:15:58
    首先安装相应插件 npm idocxtemplater ...fillname原本是作为导出的word的名字变量的后来作废了,写在了data里面 import docxtemplater from 'docxtemplater' import PizZip from 'pizzip' import JS...

    首先安装相应插件

    npm i docxtemplater

    npm i pizzip

    npm i jszip-utils

    npm i file-saver

    创建一个js文件

    tempDocxPath 是word模板 例如 “/xxxx.docx”

    fillname 原本是作为导出的word的名字变量的后来作废了,写在了data里面

    import docxtemplater from 'docxtemplater'
    import PizZip from 'pizzip'
    import JSZipUtils from 'jszip-utils'
    import {saveAs} from 'file-saver'
    
    export const exportDocx = (tempDocxPath,data) => {
      // 点击导出word
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent(tempDocxPath,(error, content) => {
          // 抛出异常
          if (error) {
              throw error;
          }
    
          // 创建一个PizZip实例,内容为模板的内容
          let zip = new PizZip(content);
          // 创建并加载docxtemplater实例对象
          let doc = new docxtemplater();
          doc.loadZip(zip);
    
          // 设置模板变量的值
          doc.setData(data);
          try {
              // 用模板变量的值替换所有模板变量
              doc.render();
          } catch (error) {
            console.log(error);
              // 抛出异常
              let e = {
                  message: error.message,
                  name: error.name,
                  stack: error.stack,
                  properties: error.properties
              };
              throw error;
          }
          
          // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
          let out = doc.getZip().generate({
              type: "blob",
              mimeType:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
          });
          // 将目标文件对象保存为目标类型的文件,并命名
          saveAs(out,data.fillname + ".docx");
      });
    }
    

    WORD模板

    word模板放在public文件下

    data 为对象

    data: {

            name: name,

            sex: sex,

            shuzu: [ {age : 18}, {age : 20}]

    }

    table为数组多个数据,table为自定名称,数组书写为

    {#xxx} 内容  {/xxx}

    数组每一行数据写完会换行

    对象里面的数据直接写  {名称}  即可

    导出word方法页面

    引入方法

    import {exportDocx} from 路径

    exportDocx ( ' /文件名.docx ' ,  data)

    导出word的名称可以动态写出在data里,也可以在外面单出穿个变量,看自己的喜好

    展开全文
  • vue导出word 帮助文档

    2020-09-24 16:43:49
    首先导入word文档 方式 传送门这里面讲的很详细。不过,如果你复制就是出现两个问题。...表格内容数据需要使用 {#参数名}开始 {/参数名} 结尾 这个就是我模板变量。 注意 模板中的 jyfiqd 对应下面函数中data的变量名*
  • 一、安装依赖 1、npm install docxtemplater 2、npm install pizzip 3、npm install jszip-utils 4、npm install ... } 四、设置word模板并放入static目录(vue3放入public目录) 缺点:碰到文本有换行符/n 无法换行
  • vue 预览word文件docx

    千次阅读 2021-07-23 14:44:33
    1、npm安装插件 npm i docx-preview 2、模板 <template> <div class="home"> <div ref="file"></div> </div> </template> <script> import axios from '... mounted()
  • vueword文档处理思路

    2021-01-06 19:45:09
    1.转成PDF文档 使用vue-pdf插件阅读更加推荐
  • Vue纯前端导出word直通车 1. 获取ECharts图的dom let dom = document.querySelector(".outline .main .content"); 2. 获取base64图片数据 页面中所有的echarts图的标签id均为 columnChart开头 dom.children....
  • vue导出wordvue-cli3)

    2020-07-02 17:00:24
    // 读取并获得模板文件的二进制内容 JSZipUtils.getBinaryContent("input.docx", function(error, content) { // input.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据 // 抛出异常 if (error) { ...
  • npm install vue-word-editor --save 依赖 quill,axios,vue 1.2 引入: import VueEditor from 'vue-word-editor'; import 'quill/dist/quill.snow.css'; 1.3 注册和配置 上传文件必须要设置请求头.
  • vue导出word含图片

    2021-04-15 11:35:35
    function () { if (imgbg.complete) { context.drawImage(imgcode, 100, 200, 50, 50) } } } } }) }, // 获取文件路径 getStaticPath (appendPath) { // 模板文件放在静态目录下,需要从静态目录下获取路径 const ...
  • Vue导出word+echarts,pdf

    2021-03-19 10:48:32
    word导出 // 这是word导出需要的插件 import JSZipUtils from 'jszip-utils' import { saveAs } from 'file-saver' import PizZip from 'pizzip' import Docxtemplater from 'docxtemplater' // 这是在模板中书写...
  • // 设置填充内容 docxtemplater.setData(data) // 进行内容填充 docxtemplater.render() // 获取到要下载的文件 const out = docxtemplater.getZip().generate({ type: 'blob', mimeType: 'application/vnd....
  • vue 读取 txt

    千次阅读 2020-09-03 14:58:08
    这时,产品会给你发一个word 文档,通常都有好几页面,这样大篇幅的文本,直接复制到页面就不合适了,再加上还要处理换行,费时费力,能够直接直接获取word内容,展示到页面最好不过,由于获取word乱码,这里暂用txt...
  • // 读取并获得模板文件的二进制内容 JSZipUtils.getBinaryContent(tempDocxPath, function(error, content) { if (error) { throw error; } expressions.filters.size = function(input, width, height)...
  • 此方法是先有word模板,然后再替换模板里的内容,模板内容分为2块,一块是段落里的,一块是表格需要动态生成的,所以后台方法也是2个 1:后台方法(此方法为百度的整理了一下) WordReporter公共类: package ...
  • 一、需求就是上传word文件,然后用pdf前端展示。 先看效果,带着效果学习,效果最好。 使用的是element ui的上传组件。 二、实现方案。 使用spring boot文件上传保存到本地,同时用LibreOffice提供的功能进行...
  • 以下文档内容已经封装,已在上传码云,有需要可以直接使用 1.基于vue导出xls文档 基于两个开源的js库 1、FileSaver.js import FileSaver from “file-saver”; //FileSaver文件生成包 FileSaver是前端人员常用的一个...
  • 下载安装 // 地址:https://github.com/hsian/vue-word-editor npm install vue-word-editor --save 2.使用 引入组件并注册 import VueEditor from "vue-word-editor"; import "quill/dist/quill.snow.css" --------...
  • vue导出Word文件(数据流方式)

    千次阅读 2020-05-15 17:41:02
    安装依赖:jquery 和file-saver npm install jquery file-saver --save jquery.wordexport.js // 导入js文件 import $ from 'jquery' import saveAs from 'file-saver' if (typeof $ !== "undefined" &...
  • VC 读取Word文档内容

    2018-06-27 21:26:36
    通过VC或者mfc打开word文档,并读取文档中的内容。。。。。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,244
精华内容 2,097
关键字:

vue读取word内容

vue 订阅