Vue导出office模板文件（xdoc在Vue中的使用）

因项目需求需要实现数据打印功能，及将页面数据写入pdf文档保存在本地。我借助的XDOC智能文档平台来实现此功能，xdoc几乎支持所有的开发语言，使用方便。

首先，需要引入xdoc的js文件，在index.html中添加如下代码：

<script type="text/javascript" src="http://www.xdocin.com/xdoc.js"></script>

也可以将xdoc.js放在本地，如放在static文件下，则使用如下代码引入（如果你的网站使用的https，则使用该方式引用）：

<script type="text/javascript" src="static/xdoc.js"></script>

然后，需要制作一个office模板，用于数据渲染；进入XDOC智能文档平台，进入我的模板（如果没有使用过该平台，则先看教程XDOC Office报表设计指南创建自己的所需模板），选择需要的模板，运行报表生成html文件。

在本地会下载一个XDocDemo的html文件，用记事本打开，将其中script部分复制至需要实现在线预览功能的地方，并将页面中变量值赋值给模板变量，还可修改下载格式。

XDoc.run("./出口报关单new.xlsx",//下载的文件名称
"xlsx",//下载格式，按需修改
{"preEntryNo": "这是一个preEntryNo",//模板变量：填入的数据
},
"_blank");

Vue导出office模板文件（xdoc在Vue中的使用）相关推荐

Vue实现Excel模板文件的上传与下载
Vue实现Excel模板文件的上传与下载一.前言越来越多的项目开始使用前后端分离的方式来进行开发了,前端使用的vue来进行页面处理的,所以正常的文件下载和上传肯定是少不了的,因为这也是自己第一次使 ...
❤️关于 idea 安装 Vue 插件后新建文件不显示 Vue Component 的问题及解决方法❤️
关于 idea 安装 Vue 插件后新建文件不显示 Vue Component 的问题及解决方法 1.点击file打开设置settings,打开Editor找到 file and code templ ...
ecshop 模板 php代码,ecshop无法在模板文件.dwt和.lbi中直接添加php代码的解决方法...
ecshop不能在模板文件.dwt和.lbi中直接添加php代码了,为什么呢? 因为直接在模板中加入php函数和代码,没有经过过滤,容易造成安全隐患.程序源码安全是比较重要的. 不过如果有朋友希望能在 ...
ecshop 模板 php代码,ecshop不能在模板文件.dwt和.lbi中直接添加php代码的解决方法...
ecshop不能在模板文件.dwt和.lbi中直接添加php代码了,为什么呢? 因为直接在模板中加入php函数和代码,没有经过过滤,容易造成安全隐患.程序源码安全是比较重要的. 不过如果有朋友希望能在 ...
oracle 11g dul,学习笔记:Oracle dul数据挖掘导出Oracle11G数据文件坏块中表中
试验模拟导出Oracle 11G数据库中数据文件坏块中表中的数据以前一直以为dul对应的版本只能恢复最高的数据库版本一致,今天测试发现dul 10可以恢复11g最新版的数据库. 模拟环境SQL> ...
lbi php,ecshop不能在模板文件.dwt和.lbi中直接添加php代碼的解決方法
ecshop不能在模板文件.dwt和.lbi中直接添加php代碼了,為什么呢? 因為直接在模板中加入php函數和代碼,沒有經過過濾,容易造成安全隱患.程序源碼安全是比較重要的. 不過如果有朋友希望能在 ...
vue导出导入csv文件（无需插件）
vue导出csv的时候有一个问题,就是如果数据是UTF-8格式的,需要在文件内容前面加BOM头,这样Excel程序可以识别这个BOM头,不会乱码. csv文件无非就是文本行加上BOM头,字符串解析就可 ...
vue下载excel模板文件，excel读取
一.下载excel模板文件 <template><a-button type="primary" @click="downloadExcel" ...
【猿说VUE】初试模板语法，开启VUE编码之旅
模板语法官网描述: Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的 ...
使用POI 导出word模板文件
maven依赖 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</art ...

Vue导出office模板文件（xdoc在Vue中的使用）

首先，需要引入xdoc的js文件，在index.html中添加如下代码：

然后，需要制作一个office模板，用于数据渲染；进入XDOC智能文档平台，进入我的模板（如果没有使用过该平台，则先看教程XDOC Office报表设计指南创建自己的所需模板），选择需要的模板，运行报表生成html文件。

在本地会下载一个XDocDemo的html文件，用记事本打开，将其中script部分复制至需要实现在线预览功能的地方，并将页面中变量值赋值给模板变量，还可修改下载格式。

Vue导出office模板文件（xdoc在Vue中的使用）相关推荐

最新文章

热门文章