精华内容
下载资源
问答
  • vueword文档处理思路
    2021-01-06 19:45:09

    1.转成PDF文档

    使用vue-pdf插件阅读更加推荐

    更多相关内容
  • vue导出word功能

    2021-02-20 17:51:36
    echarts、table、文本导入到word文档中下载
  • 给大家介绍了vue实现word或pdf文档导出的功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
  • 使用vue预览Word文件

    千次阅读 2022-01-11 09:49:14
    -- 浏览Word --> <div ref="wrap" class="client-tabl" > <div v-if="headArr.length > 3" class="left"> <!-- 侧边标题 --> <ul class="collapse"> <li v-for="(item, ...
    <template>
      <!-- 浏览Word -->
      <div
        ref="wrap"
        class="client-tabl"
      >
        <div v-if="headArr.length > 3" class="left">
          <!-- 侧边标题 -->
          <ul class="collapse">
            <li
              v-for="(item, index) in sideArr"
              :key="index"
              ref="menuLi"
              :class="{ wirte: iswrite == index }"
              @click="menuClick(item, index)"
            >
              {{ item }}
            </li>
          </ul>
        </div>
        <!-- 渲染word文件 -->
        <div
          id="wordView"
          v-loading="loading"
          element-loading-text="加载中"
          v-html="vHtml"
        />
      </div>
    </template>
    

    下载第三方插件并引用

    // npm install --save mammoth
    import mammoth from 'mammoth'
    
    name: 'Word',
      data() {
        return {
          // 内容头部目录
          headArr: ['一、业财融合', '1.1 营业外包', '1.1.1外包商合同查询'],
          // 侧边目录
          sideArr: ['一、业财融合', '1.1 营业外包', '1.1.1外包商合同查询', '1.1.2外包费调账管理', '1.1.3汇总清单查询', '1.1.4汇总账单报账'],
          iswrite: 0, // 用于侧边栏排他思想
          timer: null, // 定时器名称
          loading: true, // 用于elementui 加载插件
          vHtml: '',
          wordURL: '/templates/新手介绍手册/附件2省侧财辅操作手册_营业外包分册20211026.docx' // 此地方存放文件的地址
        }
      },
      created() {
        this.previewWord()
      },
      methods: {
      // 渲染 word 文件内容
        previewWord() {
          var vm = this
          const xhr = new XMLHttpRequest()
          xhr.open('get', this.wordURL, true)
          xhr.responseType = 'arraybuffer'
          xhr.onload = function() {
            if (xhr.status === 200) {
              mammoth
                .convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
                .then(function(resultObject) {
                  vm.$nextTick(() => {
                    vm.vHtml = resultObject.value
                    vm.timers()
                  })
                })
            }
          }
          xhr.send()
        },
        timers() {
          this.timer = setTimeout(() => {
            const inner = document.querySelectorAll('#wordView>h4')
            this.headArr.push(...inner)
            this.loading = false
          },)
        },
        // 此功能作用于 点击侧边栏 跳转到对应的内容头部标题
        menuClick(item, index) {
          this.iswrite = index
          this.headArr.forEach((iten) => {
            if (item === iten.innerHTML) {
              this.$refs.wrap.scrollTop = iten.offsetTop
            } if (item === iten) {
              this.$refs.wrap.scrollTop = iten.offsetTop
            }
          })
        },
        // 销毁定时器
        beforeDestroy() {
          clearInterval(this.timer)
          this.timer = null
        }
    

    大致效果,希望能帮到小伙伴们!
    在这里插入图片描述

    展开全文
  • vue 导出word插件

    2020-12-21 15:39:12
    文件的开头我有写需要下载的包名,使用之前下载包名,该插件包含了list-loop ,condition语法等,引入既可以使用
  • vue生成word打包批量下载
  • VUE动态生成word的实现

    2020-10-15 02:02:04
    主要介绍了VUE动态生成word的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 导出word文档

    2021-09-01 16:42:06
    vue 生成word文档
    1. 安装依赖
    npm install file-saver -S
    npm install html-docx-js -S
    
    1. 页面引用
    import saveAs from 'file-saver'
    import htmlDocx from 'html-docx-js/dist/html-docx'
    
    1. 方法调用
    downWord () {
    	// 文件名
    	const fileName = '测试.docx'
    	// 文档内容
    	const content = '<h1><title/h1><p>测试文档</p>'
    	const page = '<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>' + content + '</body></html>'
    	// 文档内容转化成流
        const converted = htmlDocx.asBlob(page)
        // 下载
        saveAs(converted, fileName)
    }
    
    展开全文
  • vue 预览word文件docx

    2022-02-21 19:24:47
    链接地址 https://kuangyx.cn/docs/%E6%96%87%E7%AB%A0/%E5%89%8D%E7%AB%AF/vue%E9%A2%84%E8%A7%88word%E6%96%87%E4%BB%B6docx.html

    链接地址

    https://kuangyx.cn/docs/%E6%96%87%E7%AB%A0/%E5%89%8D%E7%AB%AF/vue%E9%A2%84%E8%A7%88word%E6%96%87%E4%BB%B6docx.html

    展开全文
  • vue 导出word文档(包括图片)

    千次阅读 2022-04-24 13:39:28
    vue 导出word文档(包括图片)
  • 记录:vue下载word文档

    2021-01-19 14:49:25
    记录:vue下载word文档 this.$axios({ method: "get", responseType: "blob", //这里如果不设置,下载会打不开文件 ... // 通过后台返回 的word文件流设置文件名并下载 let blob = new Blob([res.data], {
  • VC 读取Word文档内容

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

    2021-12-08 20:51:14
    vue下载word文档 npm install js-file-download --save import fileDownload from ‘js-file-download’ fileDownload(res, ‘导入模板.xlsx’) 注意点: export function EngineeringExport(data) { return ...
  • vue导出word模版文档

    2021-12-17 11:19:37
    }, word模板且必须是.docx,不能是.doc docxtemplater 不支持jszip,会有报错,因此要使用PizZip 模板的路径要写正确,不然会报错找不到文件 {#processList}处理人:{dutyMan} 联系手机:{dutyManTel} 处理时间:{...
  • vue导出word文档

    2021-08-21 16:15:58
    创建一个js文件 tempDocxPath是word模板例如 “/xxxx.docx” fillname原本是作为导出的word的名字变量的后来作废了,写在了data里面 import docxtemplater from 'docxtemplater' import PizZip from 'pizzip' ...
  • vue下载word
  • 一、导入包 npm install docxtemplater npm install pizzip npm install jszip npm install jszip-utils npm install file-saver ...npm install image-size二、utils文件夹下添加word.js导出word的方法 /* * ...
  • vue 下载word文档

    千次阅读 2020-12-25 10:50:38
    // 下载 getdownloadInfo(row) { let url = row.reportUrl const fileName = url ; if ("download" in document.createElement("a")) { let downloadElement = document.createElement("a");...
  • 三、项目应用:根据详情后缀分情况显示word、excel ? ? ? ? ?1. 效果展示 2. 页面布局 3.调用函数展示数据 实现效果: 一、查看word 1.引用mammoth.js (1)安装 npm install --save mammoth npm install .
  • Vue项目导出word文档

    千次阅读 热门讨论 2020-04-17 17:26:23
    关于Vue项目导出word文档,网上实在是有太多的方法,这里只介绍个人喜欢的一种: 使用到的依赖有docxtemplater、pizzip、jszip-utils、file-saver 安装依赖: yarn add docxtemplater yarn add pizzip yarn add ...
  • vue怎么导出word文档

    2021-01-17 17:53:18
    匿名用户1级2018-06-14 回答用这个 jquery.wordexport.js我用的是网页链接 这个,大佬修改了源代码做成组件,vue组件里导入就可以使用了,两个依赖在组件里都调用了importwordExportfrom'./public/wordExport/jquery...
  • word简历在线编辑-vue

    2019-01-17 11:55:14
    vue-cli ----快速构建项目 scss ----便利的css大法 element-ui ---- UI组件库 normalize.css ---- 重置掉该重置的样式 LeanCloud ---- 存储数据 html2canvas ---- HTML转成canvas jsPDF ---- 转成PDF
  • 一、安装依赖 1、npm install docxtemplater 2、npm install pizzip 3、npm install jszip-utils 4、npm install ... } 四、设置word模板并放入static目录(vue3放入public目录) 缺点:碰到文本有换行符/n 无法换行
  • vue打开word

    2022-02-11 17:04:52
    先引入mammoth ...div id="wordView"></div> </template> <script> import mammoth from "mammoth"; export default { name: "detail", data() { return { vHtml: "", wordURL: "
  • vue页面导出Word文档(含图片)

    千次阅读 热门讨论 2020-08-26 19:48:53
    引用插件 安装 npm i docxtemplater@3.17.6 npm i pizzip --save npm i jszip-utils@0.1.0 --save npm i jszip@2.6.1 --save npm i file-saver@2.0.2 --save npm install open-... 相关文章:vue导出word文档

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,213
精华内容 2,485
关键字:

vue显示word文档