vue2 实现导出word 只能导出.doc 文档（Newbie）

最新推荐文章于 2024-05-25 11:31:53 发布

蠢北

最新推荐文章于 2024-05-25 11:31:53 发布

阅读量797

点赞数

文章标签： word

本文链接：https://blog.csdn.net/qq_60485359/article/details/130322383

版权

1，只能导出.doc 如若需要可以让后端转换.docx格式

需要用到 JQ 的技术，引入依赖
npm i jquery -s
FileSaver.js是一个JavaScript库，用于在浏览器中保存文件。它提供了一个简单的API，可以将Blob或File对象保存为本地文件，同时支持设置文件名和MIME类型。使用FileSaver.js可以方便地将数据导出为文件，比如将表格数据导出为CSV文件、将图像数据导出为PNG文件等。

无需下载word文档，可以不安装此依赖
npm install file-saver --save

代码依赖 jquery.wordexport.js

// 导入js文件
import $ from 'jquery'
import saveAs from 'file-saver'
if (typeof $ !== "undefined" && typeof saveAs !== "undefined") {
    (function ($) {
        $.fn.wordExport = function (fileName) {
            fileName = typeof fileName !== 'undefined' ? fileName : "jQuery-Word-Export";
            var statics = {
                mhtml: {
                    top: "Mime-Version: 1.0\nContent-Base: " + location.href + "\nContent-Type: Multipart/related; boundary=\"NEXT.ITEM-BOUNDARY\";type=\"text/html\"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset=\"utf-8\"\nContent-Location: " + location.href + "\n\n<!DOCTYPE html>\n<html>\n_html_</html>",
                    head: "<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n<style>\n_styles_\n</style>\n</head>\n",
                    body: "<body>_body_</body>"
                }
            };
            var options = {
                maxWidth: 624
            };
            // 在操作所选元素之前克隆它
            var markup = $(this).clone();
            // 从输出中删除隐藏元素
            markup.each(function () {
                var self = $(this);
                if (self.is(':hidden'))
                    self.remove();
            });
            var styles = "";
            // 将文件的各个部分聚合在一起
            var fileContent = statics.mhtml.top.replace("_html_", statics.mhtml.head.replace("_styles_", styles) + statics.mhtml.body.replace("_body_", markup.html())) ;
            // 用文件内容创建一个Blob
            var blob = new Blob([fileContent], {
                type: "application/msword;charset=utf-8"
            });
            console.log(blob)
            // 下载word文档
            saveAs(blob, fileName + ".doc");
        };
    })($);
} else {
    if (typeof $ === "undefined") {
        console.error("jQuery Word Export: missing dependency (jQuery)");
    }
    if (typeof saveAs === "undefined") {
        console.error("jQuery Word Export: missing dependency (FileSaver.js)");
    }
}

应用页面

只是举了一个小栗子在 id= word_demo 的div中可以锁所以添加内容都回展示到word里面（样式也会一并跟着转换）

<template>
    <div id="word_demo">
        <p>123123</p>
    </div>
</template>

<script>
    import $ from 'jquery'
    require('@/assets/js/jquery.wordexport')

    mounted() {
        setTimeout(function () {
            $('#word_demo').wordExport('word文档')
        }, 300)   
    }

</script>

具体需求

点击上传后生成word文档，在记录一下应用富文本编译器

转载于：Vue使用ueditor百度富文本编辑器 - 往暮 - 博客园 (cnblogs.com)

作者：往暮

1.进入官网或者github下载源码

地址：GitHub - fex-team/ueditor: rich text 富文本编辑器

推荐 git clone https://github.com/fex-team/ueditor.git

2.使用grunt编译

npm install -g grunt-cli
安装后在全局变量里配置！！！这里我没有配置，不知道是以前弄过还是，升级后

3.编译 ueditor 项目

安装依赖

npm install 
依赖安装好以后，使用命令
grunt default
进行编译，编译后会生成 dist 文件

将dist目录中 utf8-php 目录复制到vue原项目的 public 目录中，修改 utf8-php 目录名为 UEditor

4.原项目安装 vue-ueditor-wrap

npm install vue-ueditor-wrap

5.组件中引入，自定义组件

<template>
  <vue-ueditor-wrap v-model="dataStr" :config="myConfig"  @ready="ready"></vue-ueditor-wrap>
</template>

这里可能会出现错误一定要检查 UEDITOR_HOME_URL 填写的路径是否正确

建议放在public 文件夹下

只要 http://自己IP:自己端口/ueditor 能正常访问基本上富文本就没有问题

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
  components: { VueUeditorWrap },
  data() {
    return {// 编辑器
      dataStr: '我是渲染字段',
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 600,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口
        serverUrl: '',
        // UEditor 是文件的存放路径，
        UEDITOR_HOME_URL: '/static/ueditor/'
      }
    }
  },
  mounted() {
    this.ready()
  },
  methods: {
    ready(editorInstance) {
      console.log(`编辑器实例${editorInstance.key}: `, editorInstance)
    },
  }
}
</script>

蠢北

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue2 实现导出word 只能导出.doc 文档（Newbie）

template>这里可能会出现错误一定要检查 UEDITOR_HOME_URL 填写的路径是否正确建议放在public 文件夹下只要 http://自己IP:自己端口/ueditor 能正常访问基本上富文本就没有问题<script>data() {return {// 编辑器dataStr: '我是渲染字段',// 编辑器不自动被内容撑高// 初始容器高度// 初始容器宽度// 上传文件接口// UEditor 是文件的存放路径，},},methods: {
复制链接

扫一扫