vue 使用docx-preview 预览替换文档内的特定变量

在开发合同管理中,需要使用到此功能,就是替换合同模板内的一些字符串,如:甲乙方名称,金额日期等,合同内容不变。效果如下:

 使用docx-preview 好处是只预览不可编辑内容。

前端vue

import { renderAsync } from 'docx-preview';

// 替换文件内容
function onWordSave(){
  axios({
    method: "post",
    responseType: "blob", // 因为是流文件,所以要指定blob类型
    url: Http.getBaseURL() + "/contract/Index/setWord", // 自己的服务器,提供的一个word下载文件接口
    data:{'fieldData':select_field.value,'tem_id':form.value.tem_id}
  }).then(response => {
    if (response.status === 200) {
      // 检查Content-Type是否是预期的类型
      const contentType = response.headers['content-type'] || response.headers['Content-Type'];
      if (contentType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
        // 数据正确,处理blob数据
        ElMessage({type:'success', message:'替换模板内容成功'})
        file_url.value = response.data
      }else {
        // 数据类型不匹配
        ElMessage({type:'error', message: '模板内容替换失败'})
      }
    } else {
      // 响应状态不是200
      ElMessage({type:'error', message: 'failed to open stream: No such file or directory'})
    }
  }).catch(error => {
    // 请求失败,处理错误
    ElMessage({type:'error', message:error})
  });
}
// 预览文件
function docxRender() {
  ContractFileRef.value.innerHTML = ''; // 清空之前的内容
  if(file_url.value != ''){
    let blob = new Blob([file_url.value]); // 将 OSS 文件转为 Blob 对象
    // 渲染文档并获取内容控件
    renderAsync(blob, ContractFileRef.value);
  }
}

后端 控制器方法:

 /**
     * @名称:模板内容替换
     * User: congxion
     * Date: 2024/10/31 16:44
     */
    public function setWord(){
        try{
            $param = $this->request->param();
            if(empty($param['tem_id'])){
                return jsonError('请选择合同模板');
            }
            if(empty($param['fieldData'])){
                return jsonError('没有可替换的内容');
            }
            return $res = ContractService::setWord($param['fieldData'], $param['tem_id']);
        }catch(\Exception $e){
            return jsonError($e->getMessage());
        }
    }

后端逻辑层方法

public static function setWord($data,$met_id){
        $template = Db::name('template')->where(['id'=>$met_id])->find();
        if(empty($template['file_url'])){
            throw new Exception('没有模板文件');
        }
        // 加载Word文档
        $template_path = public_path().'storage/'.$template['file_url'];
        if(!file_exists($template_path)){
            throw new Exception(public_path().'storage/'.$template['file_url']);
        }
        //读取模版word的版本最好是docx,要不然可能会读取不了
        $templateProcessor = new TemplateProcessor($template_path);
        $data_str = "";
        foreach ($data as $k => $v) { //读取模版word的版本最好是docx,要不然可能会读取不了
            $newname = !empty($v['newname']) ? $v['newname']: '';
            $templateProcessor->setValue($v['key'], $newname); //替换模板中的变量,对应word里的 ${xxxx}
            $data_str .= $v['key'].$newname;
        }
        $save_name = GetRandStr(5).'_'.time() . '.docx'; //保存的文件名
        $return_path = 'storage/temword/'.date('Ymd').'/'; //保存的文件路径
        $savepath = public_path() . $return_path;
        if (!is_dir($savepath)) {
            @mkdir($savepath,0777);
        }
        $templateProcessor->saveAs($savepath.$save_name); //将内容保存到生成新的word中
        $data_md5 = md5($met_id.$data_str);
        // 缓存文件名
        Cache::set($data_md5, $return_path.$save_name, 3600);
        // 或输出到浏览器
        header('Content-Description: File Transfer');
        header('Content-Type: application/vnd.openxmlformats-officedocument.wordprocessingml.document');
        header('Content-Disposition: attachment; filename="output.docx"');
        header('Cache-Control: must-revalidate');
        header('Pragma: public');
        header('Expires: 0');
        readfile($savepath.$save_name);
        exit;
    }

接口返回的是文件流,前端插件可直接使用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/909250.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[N-155]基于springboot,vue宿舍管理系统

开发工具:IDEA 服务器:Tomcat9.0, jdk1.8 项目构建:maven 数据库:mysql5.7 项目采用前后端分离 前端技术:vue3element-plus 服务端技术:springbootmybatis-plus 本项目分为学生、宿舍管理…

json-server的使用(根据json数据一键生成接口)

一.使用目的 在前端开发初期,后端 API 可能还未完成,json-server 可以快速创建模拟的 RESTful API,帮助前端开发者进行开发和测试。 二.安装 npm install json-server //局部安装npm i json-server -g //全局安装 三.使用教程 1.准备一…

win11安装安卓apk原生应用,并设置网络代理

一、win11安装安卓apk原生应用,查看https://blog.csdn.net/qq_33704787/article/details/123658419https://blog.csdn.net/qq_33704787/article/details/123658419 主要是安装:Windows Subsystem for Android™ with Amazon Appstore 二、使用ABD工具设…

算法|牛客网华为机试21-30C++

牛客网华为机试 上篇:算法|牛客网华为机试10-20C 文章目录 HJ21 简单密码HJ22 汽水瓶HJ23 删除字符串中出现次数最少的字符HJ24 合唱队HJ25 数据分类处理HJ26 字符串排序HJ27 查找兄弟单词HJ28 素数伴侣HJ29 字符串加解密HJ30 字符串合并处理 HJ21 简单密码 题目描…

如何对数据库的表字段加密解密处理?

对于表格数据的加密处理,通常涉及到对数据库中存储的数据进行加密,以保护敏感信息。 Java示例(使用AES算法加密数据库表数据) 首先,你需要一个数据库连接,这里假设你使用的是JDBC连接MySQL数据库。以下是…

搭建你的私人云盘:使用File Browser与cpolar实现公网传输文件

文章目录 前言1.下载安装File Browser2.启动访问File Browser3.安装cpolar内网穿透3.1 注册账号3.2 下载cpolar客户端3.3 登录cpolar web ui管理界面3.4 创建公网地址 4.固定公网地址访问 前言 File Browser是一个开源的文件管理器和文件共享工具,它可以帮助用户轻…

SpringBoot 集成 Mybatis-Plus,LambdaQueryWrapper 使用方法

🏝️ 博主介绍 大家好,我是 一个搬砖的农民工,很高兴认识大家 😊 ~ 👨‍🎓 个人介绍:本人是一名后端Java开发工程师,坐标北京 ~ 🎉 感谢关注 📖 一起学习 &am…

新闻稿件管理:SpringBoot框架技术突破

摘要 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了新闻稿件管理系统的开发全过程。通过分析新闻稿件管理系统管理的不足,创建了一个计算机管理新闻稿件管理系统的方案。文章介绍了新闻稿件管理系统的系…

「Mac畅玩鸿蒙与硬件27」UI互动应用篇4 - 猫与灯的互动应用

本篇将带领你实现一个趣味十足的互动应用,用户点击按钮时猫会在一排灯之间移动,猫所在的位置灯会亮起(on),其余灯会熄灭(off)。应用会根据用户的操作动态更新灯光状态和文本提示当前亮灯的位置&…

QGIS:HCMGIS插件

插件GitHub地址:https://github.com/thangqd/HCMGIS。 以下对HCMGIS插件进行简单介绍,并演示如何进行地图数据下载。 插件简介 HCMGIS - Basemaps, Download OpenData, Batch Converter, VN-2000 Projections, and Field Calculation Utilities for QGI…

什么情况下,不推荐建立索引?

一般有以下几种情况不推荐建立索引: 1)对于数据量很小的表 当表的数据量很小(如几百条记录)时,建立索引并不会显著提高查询性能,反而可能增加管理的复杂性; 2)频繁更新的表 对于…

Vue 组件基础(五)

一、Vue 组件的基础概念 组件(Component)是Vue最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue的编译器为它添加特殊功能。每个组件负责一部分特定的任务,比如:显示一个…

Spring学习笔记(一)

一 、Spring概述 (一)Spring是什么 Spring是一个分层的Java SE/EE full-stack(一站式)轻量级开源框架,以 IoC(Inverse Of Control:反转控制)和 AOP(Aspect Oriented Programming:面…

数码身份与隐私保护挑战,未来监控社会如何应对?

内容概要 在这个数字化飞速发展的时代,数码身份如雨后春笋般涌现,似乎每个人都在网络的宇宙中拥有自己的“数字分身”。但随着这一现象的发展,隐私保护的挑战随之而来,就像一只藏在角落里的猫,随时可能蹦出来让你手足…

智慧商城项目-VUE2

实现效果 项目收获 通过本项目的练习,可以掌握以下内容: 创建项目 ##基本创建 基于 VueCli 自定义创建项目架子,并对相关的配置进行选择 vue create demo-shopping调整目录 删除文件 删除初始化的一些默认文件 src/assets/logo.pngsrc/components…

【Android】使用productFlavors构建多个变体

项目需求 在一个设备上安装两个一样的程序app 需求解决 我们知道每一个app都有一个包名的,如果一个app在Android设备上安装之后,再安装这个app的话会进行覆盖安装,因为他们两个的包名是一样的,默认是一个app。 但是我们现在需…

File和InputStream,OutputStream

目录 认识⽂件 树型结构组织 和 ⽬录 ⽂件路径(Path) 文件的种类 File类 属性 构造方法 方法 代码示例 文件内容的读写——数据流 java中提供了一组类表示流 1.字节流 2.字符流 InputStream概述 方法 说明 FileInputStream概述 构造方法…

docker镜像仓库实战

docker镜像仓库实战 搭建一个nginx服务基础知识(Web服务器)查找nginx镜像拉取镜像启动nginx镜像 搭建一个nginx服务 基础知识(Web服务器) Web 服务器,一般是指“网站服务器”,是指驻留于互联网上某种类型计算机的程序。Web 服务器可以向 Web 浏览器等客…

[Redis] Redis主从复制模式

🌸个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 🏵️热门专栏: 🧊 Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 🍕 Collection与…

VisionPro —— CogPatInspectTool对比工具

一、CogPathInspectTool工具简介 CogPathInspectTool是VisionPro重要的工具,主要用于缺陷检测,通过将当前图像与“训练图像”对比,获取“原始差异图像”,再将“原始差异图像”与“阈值图像”进行对比,进而获取“阈值差…