当前位置: 首页 > news >正文

word打印---doc转html后进行打印,window.print、print-js、vue-print-nb

提示:word预览方式—插件

文章目录

    • @[TOC](文章目录)
  • 前言
  • 一、vue-office-docx把docx转换html
  • 二、调取window.print
  • 三、print-js
  • 四、vue-print-nb
  • 总结

前言

word预览

在这里插入图片描述

一、vue-office-docx把docx转换html

npm install vue-office-docx -S-D

officeDocx.vue

<template><div class="preview_box"><VueOfficeDocx :src="htmlContent"></VueOfficeDocx></div></template><script>import axios from 'axios'import VueOfficeDocx from '@vue-office/docx'//引入相关样式import '@vue-office/docx/lib/index.css';export default {name: 'preview',components:{VueOfficeDocx},data () {return {src:`.docx文件rul`,htmlContent:''}},mounted(){this.docToHtml();},methods: {docToHtml(){axios.get(this.src,{ responseType: 'arraybuffer' }).then((res)=>{this.htmlContent = res.data;})}}}</script><style scoped></style>

在这里插入图片描述
样式还原度一般,间距太大,分页也有问题

二、调取window.print

officeDocx.vue

<template><div class="preview_box" ><div class="preview_print_btn" @click="printHTML">打印</div><div  ref="printBoxRef"><VueOfficeDocx :src="htmlContent"></VueOfficeDocx></div></div></template><script>import axios from 'axios'import VueOfficeDocx from '@vue-office/docx'//引入相关样式import '@vue-office/docx/lib/index.css';export default {name: 'preview',components:{VueOfficeDocx},data () {return {src:`https://iteachcdn.test.xdf.cn/doc/111f92d3d71f471db47a4cb88b425d71.docx`,// src:`.docx文件rul`,htmlContent:''}},mounted(){this.docToHtml();},methods: {docToHtml(){axios.get(this.src,{ responseType: 'arraybuffer' }).then((res)=>{this.htmlContent = res.data;})},printHTML(){// 新建窗口const win = window.open('','_blank');// 把要打印的html写入新窗口win.document.write(this.$refs.printBoxRef.innerHTML);// 调起浏览器打印win.window.print();// 关闭新窗口win.window.close();  },}}</script>
<style scoped>
.preview_print_btn{height: 32px;line-height: 32px;background: #0e7a38;color: #fff;text-align: center;
}
</style>

在这里插入图片描述
预览有问题,打印也有问题

三、print-js

npm install print-js -S-D

officeDocx.vue

<template><div class="preview_box" ><div class="preview_print_btn" @click="printHTML">打印</div><div  ref="printBoxRef"><VueOfficeDocx :src="htmlContent"></VueOfficeDocx></div></div></template><script>import axios from 'axios'import VueOfficeDocx from '@vue-office/docx'//引入相关样式import '@vue-office/docx/lib/index.css';import printJS from 'print-js'export default {name: 'preview',components:{VueOfficeDocx},data () {return {src:`https://iteachcdn.test.xdf.cn/doc/111f92d3d71f471db47a4cb88b425d71.docx`,// src:`.docx文件rul`,htmlContent:''}},mounted(){this.docToHtml();},methods: {docToHtml(){axios.get(this.src,{ responseType: 'arraybuffer' }).then((res)=>{this.htmlContent = res.data;})},printHTML(){printJS({printable: this.$refs.printBoxRef,type: 'html',targetStyles: ['*']}); },}}</script>
<style scoped>
.preview_print_btn{height: 32px;line-height: 32px;background: #0e7a38;color: #fff;text-align: center;
}
</style>

在这里插入图片描述
打印样式相对好一些,但是分页有问题

四、vue-print-nb

npm install vue-print-nb -S-D

officeDocx.vue

<template><div class="preview_box" ><div class="preview_print_btn" v-print="printobj">打印</div><div id="printBox" ref="printBoxRef"><VueOfficeDocx :src="htmlContent"></VueOfficeDocx></div></div></template><script>import axios from 'axios'import VueOfficeDocx from '@vue-office/docx'//引入相关样式import '@vue-office/docx/lib/index.css';import Print from 'vue-print-nb';export default {name: 'preview',components:{VueOfficeDocx},data () {return {src:`.docx文件rul`,htmlContent:'',printobj: {id: "printBox",popTitle: '标题',extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",extraHead: '<meta http-equiv="content-language" content="zh-cn" />',beforeOpenCallback(vue) {console.log('调起打印弹窗之前');},openCallback(vue) {console.log('调起打印弹窗');}}}},directives: { Print },mounted(){this.docToHtml();},methods: {docToHtml(){axios.get(this.src,{ responseType: 'arraybuffer' }).then((res)=>{this.htmlContent = res.data;})},}}</script>
<style scoped>
.preview_print_btn{height: 32px;line-height: 32px;background: #0e7a38;color: #fff;text-align: center;
}
@media print {@page {size: auto;margin: 3mm;}body {height: auto;}
}
</style>

在这里插入图片描述
打印样式也有问题
综上:word转html后进行打印方式存再问题,不建议使用

总结

踩坑路漫漫长@~@

相关文章:

word打印---doc转html后进行打印,window.print、print-js、vue-print-nb

提示&#xff1a;word预览方式—插件 文章目录 [TOC](文章目录) 前言一、vue-office-docx把docx转换html二、调取window.print三、print-js四、vue-print-nb总结 前言 word预览 一、vue-office-docx把docx转换html npm install vue-office-docx -S-DofficeDocx.vue <templ…...

CTF学习笔记汇总(非常详细)零基础入门到精通,收藏这一篇就够了

CTF学习笔记汇总 Part.01 Web 01 SSRF 主要攻击方式如下&#xff1a; 01 对外网、服务器所在内网、本地进行端口扫描&#xff0c;获取一些服务的banner信息。 02 攻击运行在内网或本地的应用程序。 03 对内网Web应用进行指纹识别&#xff0c;识别企业内部的资产信息。 …...

如果想不明白,那就读书吧

人生起伏是常态&#xff0c;平平淡淡的日子亦是常态&#xff0c;但是在常态中的普通人往往面对着各种各样的风险和挑战&#xff0c;稍有不慎&#xff0c;生活天翻地覆。 回到现在这家公司是一次吃回头草的过程&#xff0c;其中亦是一次生活的坎坷&#xff0c;祸福相伴。来公司…...

Golang处理Word文档模板实现标签填充|表格插入|图标绘制和插入|删除段落|删除标签

本教程主要实现【Golang处理Word文档模板实现标签填充|表格插入|图标绘制和插入|删除段落|删除标签】。 本文源码&#xff1a;https://gitee.com/songfayuan/go-zero-demo 教程源码分支&#xff1a;master 分支&#xff08;_examples/word-template/fill-word-template.go&…...

PHP学习:PHP基础

以.php作为后缀结尾的文件&#xff0c;由服务器解析和运行的语言。 一、语法 PHP 脚本可以放在文档中的任何位置。 PHP 脚本以 <?php 开始&#xff0c;以 ?> 结束。 <!DOCTYPE html> <html> <body><h1>My first PHP page</h1><?php …...

Xinstall新玩法:Web直接打开App,用户体验再升级!

在移动互联网时代&#xff0c;App已成为我们日常生活中不可或缺的一部分。然而&#xff0c;在App推广和运营过程中&#xff0c;许多开发者面临着从Web端引流到App的难题。这时&#xff0c;Xinstall作为国内专业的App全渠道统计服务商&#xff0c;提供了一种创新的解决方案——通…...

perf 排查高延迟

高延迟的 2 个场景&#xff0c;触发 perf 录包思路 当前 perf 没有常驻内存&#xff0c;后续提供 perf 常驻内存功能。且 perf 启动需要 0.5~1s&#xff0c;所以&#xff0c;存在 2 个场景 1.频繁连续高延迟&#xff08;复现后的几秒内&#xff0c;继续频繁复现&#xff09;&a…...

配置8188eu无线网卡的热点模式

下载驱动 github:8188eu的最新驱动&#xff0c;注意下载5.2.2.4分支 关于这一驱动&#xff0c;不要下载master分支&#xff0c;master分支代码较早&#xff0c;会导致以下两点问题&#xff1a; 1.STA模式下连接wifi信号较差时会卡死 2.无法启动AP模式 所以请务必下载5.2.2.4分…...

为什么 DDoS 攻击偏爱使用 TCP 和 UDP 包?

Distributed Denial of Service (DDoS) 攻击是指攻击者利用多个计算机系统或网络设备&#xff08;通常是被恶意软件感染的计算机&#xff0c;被称为“僵尸网络”&#xff09;来淹没目标服务器的资源&#xff0c;导致合法用户无法访问服务。TCP 和 UDP 是两种最常见的用于 DDoS …...

多址技术(FDMA,TDMA,CDMA,帧,时隙)(通俗易懂)

多址技术是一种区分用户的技术。 举个例子&#xff0c;一个基站发出信息&#xff0c;如何确定是发给谁的&#xff1f; 这个技术就是解决这个问题的。 多址技术常见的有三种&#xff1a; 频分多址&#xff08;FDMA&#xff09;、时分多址&#xff08;TDMA&#xff09;、码分…...

基于 KubeSphere 的 Kubernetes 生产环境部署架构设计及成本分析

转载&#xff1a;基于 KubeSphere 的 Kubernetes 生产环境部署架构设计及成本分析 前言 导图 1. 简介 1.1 架构概要说明 今天分享一个实际小规模生产环境部署架构设计的案例&#xff0c;该架构设计概要说明如下&#xff1a; 本架构设计适用于中小规模(<50)的 Kubernetes …...

RabbitMQ 入门篇

接上一篇《RabbitMQ-安装篇&#xff08;阿里云主机&#xff09;-CSDN博客》 安装好RabbitMQ后&#xff0c;我们将开始RabbitMQ的使用&#xff0c;根据官网文档RabbitMQ Tutorials | RabbitMQ&#xff0c;我们一步一步的学习。 1. "Hello World!" 这里先说明几个概…...

【赛事】2024第五届“华数杯”全国大学生数学建模竞赛

为了培养学生的创新意识及运用数学方法和计算机技术解决实际问题的能力&#xff0c;天津市未来与预测科学研究会、中国未来研究会大数据与数学模型专业委员会&#xff08;协办&#xff09;决定举办华数杯全国大学生数学建模竞赛。竞赛的目标是为培养大学生的科学精神及运用数学…...

DB管理客户端navicat、DBever、DbVisualizer数据库连接信息迁移

DB管理客户端Navicat、DBever、DbVisualizer数据库连接信息迁移 第三方数据库连接工具为了确保数据库信息安全通常对保存的数据库连接密码进行加密&#xff0c;填入后想再拿到原文就不可能了&#xff0c;有时交接给别人或者换电脑时可以通过连接数据导出的方式来解决。 Navic…...

CF 训练2

688 div2 C Balanced Bitstring 思路&#xff1a;首先对于区间问题 &#xff0c; 我们可以先思考让它滑动滑动。对于[l,r],向后滑动一位后 &#xff0c;[l1 , r1],因为两次的区间中 &#xff0c; [l1 ,r]中所有数都是相同的 &#xff0c; 所以 可以得到s[l] s[r1] &#xff0…...

内网隧道学习笔记

1.基础&#xff1a; 一、端口转发和端口映射 1.端口转发是把一个端口的流量转发到另一个端口 2.端口映射是把一个端口映射到另一个端口上 二、http代理和socks代理 1.http带那里用http协议、主要工作在应用层&#xff0c;主要用来代理浏览网页。 2.socks代理用的是socks协议、…...

Umi-OCR:功能强大且易于使用的本地照片识别软件

Umi-OCR是一款开源且免费的离线OCR&#xff08;光学字符识别&#xff09;软件&#xff0c;可让您轻松从照片中提取文本。它支持多种语言&#xff0c;并具有许多其他功能使其成为照片识别任务的绝佳选择。 Umi-OCR的优势 离线操作&#xff1a; Umi-OCR无需互联网连接即可工作&…...

HarmonyOS开发商城商品详情-底部导航

目录 一:功能概述 二:代码实现 三:效果图 一:功能概述 上一节我们实现了商品详情页基础信息展示,这一节主要实现底部立即购买和加入购物车的功能。首先我们需要在底部创建两个按钮,这两个按钮固定字底部,不随页面滚动。点击添加购物车按钮,会出现一个对话框,显示商…...

C语言 ——— 学习、使用 strcat函数 并模拟实现

目录 学习strcat函数​编辑 使用strcat函数​编辑 模拟实现strcat函数 学习strcat函数 strcat函数所需要的头文件&#xff1a; #include<string.h> strcat函数的参数解析&#xff1a; 将 source 字符串追加到 destination 字符串。destination 中的字符串结束标志…...

视频超压缩保持质量 ffmpeg

参考&#xff1a; https://x.com/mortenjust/status/1817991110544744764 基于 FFMpeg 的 H264 压缩标准&#xff0c;实现压缩 90% 的视频大小 在线体验地址&#xff1a; https://tools.rotato.app/compress ffmpeg命令执行 ffmpeg -i "C:\Users\loong\Downloads\屏幕录…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

【LeetCode】3309. 连接二进制表示可形成的最大数值(递归|回溯|位运算)

LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 题目描述解题思路Java代码 题目描述 题目链接&#xff1a;LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...