vue前端实现导出页面为word(两种方法)

将vue页面导出为word文档,不用写模板,直接导出即可。

第一种方法(简单版)

第一步:安装所需依赖

npm install html-docx-js -S
npm install file-saver -S

第二步:创建容器,页面使用方法

在这里插入图片描述

注意:在当前页面引入依赖

import FileSaver from "file-saver"; 
import htmlDocx from "html-docx-js/dist/html-docx";**

第二种方法(需要使用jquery)

第一步:安装所需依赖

npm install jquery --save
npm install file-saver

第二步:创建两个js文件,一个是jquery文件(jq.js),一个是插件js的文件(jquery.wordexport.js),我把这两个js文件都放到utils文件夹下,注意:使用的时候一定要注意引用路径。这两个js文件代码我都放到文章最后(有一个插件没有依赖包,所以需要自己创建一个js文件(jquery.wordexport.js))

第三步:在需要导出的页面引入文件

import $ from "@/utils/jq"; // 文件引入路径一定要正确,这是第二步创建的js文件(jq.js)
import saveAs from "file-saver/dist/FileSaver";
import "@/utils/jquery.wordexport"; // 文件引入路径一定要正确,这是第二步创建的js文件(jquery.wordexport.js)

第三步:页面使用方法

在这里插入图片描述

注意:如果导出的时候出现bug,大多是因为文件路径引入有问题,再次排查路径引入

jq.js

import $ from "jquery";
  window.$ = $;
  window.jQuery = $;
export default $;

jquery.wordexport.js

if (typeof jQuery !== "undefined" && typeof saveAs !== "undefined") {
  (function ($) {
      $.fn.wordExport = function (fileName) {
          fileName = typeof fileName !== 'undefined' ? fileName : "jQuery-Word-Export";
          var static = {
              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 xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">\n_html_</html>',
                  head:
                    '<head>\n<meta http-equiv="Content-Type" content="text/html; charset=utf-8">\n<style>\n_styles_\n</style>\n<!--[if gte mso 9]><xml><w:WordDocument><w:View>Print</w:View><w:TrackMoves>false</w:TrackMoves><w:TrackFormatting/><w:ValidateAgainstSchemas/><w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid><w:IgnoreMixedContent>false</w:IgnoreMixedContent><w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText><w:DoNotPromoteQF/><w:LidThemeOther>EN-US</w:LidThemeOther><w:LidThemeAsian>ZH-CN</w:LidThemeAsian><w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript><w:Compatibility><w:BreakWrappedTables/><w:SnapToGridInCell/><w:WrapTextWithPunct/><w:UseAsianBreakRules/><w:DontGrowAutofit/><w:SplitPgBreakAndParaMark/><w:DontVertAlignCellWithSp/><w:DontBreakConstrainedForcedTables/><w:DontVertAlignInTxbx/><w:Word11KerningPairs/><w:CachedColBalance/><w:UseFELayout/></w:Compatibility><w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel><m:mathPr><m:mathFont m:val="Cambria Math"/><m:brkBin m:val="before"/><m:brkBinSub m:val="--"/><m:smallFrac m:val="off"/><m:dispDef/><m:lMargin m:val="0"/> <m:rMargin m:val="0"/><m:defJc m:val="centerGroup"/><m:wrapIndent m:val="1440"/><m:intLim m:val="subSup"/><m:naryLim m:val="undOvr"/></m:mathPr></w:WordDocument></xml><![endif]--></head>\n',
                  body: "<body>_body_</body>",
              },
          };
          var options = {
              maxWidth: 624,//最大宽度
          };
          // Clone selected element before manipulating it
          var markup = $(this).clone();

          // Remove hidden elements from the output
          markup.each(function () {
              var self = $(this);
              if (self.is(':hidden'))
                  self.remove();
          });

          // Embed all images using Data URLs
          var images = Array();
          var img = markup.find('img');
          // var img = new Image(); 用这一行的话,WPS不显示图片,用上面的——只兼容office Word。
          var mhtmlBottom = "\n";
          for (var i = 0; i < img.length; i++) {
              // Calculate dimensions of output image
              var w = Math.min(img[i].width == 0 ? options.maxWidth : img[i].width, options.maxWidth);
              var h = (img[i].height == 0 ? options.defaultLength : img[i].height) * (w / (img[i].width == 0 ? options.maxWidth : img[i].width));

              // Create canvas for converting image to data URL
              var canvas = document.createElement("CANVAS");
              canvas.width = w;
              canvas.height = h;
              // Draw image to canvas
              var context = canvas.getContext('2d');
              context.drawImage(img[i], 0, 0, w, h);
              // Get data URL encoding of image
              var uri = canvas.toDataURL("image/png");
              // console.log(i+":"+uri);
              $(img[i]).attr("src", img[i].src);
              img[i].width = w;
              img[i].height = h;

              mhtmlBottom += "--NEXT.ITEM-BOUNDARY\n";
              mhtmlBottom += "Content-Location: " + uri + "\n";
              mhtmlBottom += "Content-Type: " + uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")) + "\n";
              mhtmlBottom += "Content-Transfer-Encoding: " + uri.substring(uri.indexOf(";") + 1, uri.indexOf(",")) + "\n\n";
              mhtmlBottom += uri.substring(uri.indexOf(",") + 1) + "\n\n";
          }

          mhtmlBottom += "--NEXT.ITEM-BOUNDARY--";

          //TODO: load css from included stylesheet
          var styles = "";

          // Aggregate parts of the file together
          var fileContent = static.mhtml.top.replace("_html_", static.mhtml.head.replace("_styles_", styles) + static.mhtml.body.replace("_body_", markup.html())) + mhtmlBottom;

          // Create a Blob with the file contents
          var blob = new Blob([fileContent], {
              type: "application/msword;charset=utf-8"
          });
          saveAs(blob, fileName + ".doc"); // 注意:不要改成docx,不然会打不开!!!
          
      };
  })(jQuery);
} else {
  if (typeof jQuery === "undefined") {
      console.error("jQuery Word Export: missing dependency (jQuery)");
  }
  if (typeof saveAs === "undefined") {
      console.error("jQuery Word Export: missing dependency (FileSaver.js)");
  }
}

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

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

相关文章

对于多个表多个字段进行查询、F12查看网页的返回数据帮助开发、数据库的各种查询方式(多对多、多表查询、子查询等)。

对于多个表多个字段进行查询、F12查看网页的返回数据帮助开发、数据库的各种查询方式&#xff08;多对多、多表查询、子查询等&#xff09;。 一、 前端界面需要展现多个表的其中几个数据的多表查询。1. 三个表查询其中字段返回&#xff1a;&#xff08;用一下sql语句&#xff…

论文翻译 | (TAKE A STEP BACK) 后退一步:在大型语言模型中通过抽象来调用推理

摘要 我们介绍了STEP-BACK提示&#xff0c;这是一种简单的提示技术&#xff0c;使LLM能够进行抽象&#xff0c;从而从包含特定细节的实例中派生高级概念和第一原则。使用概念和原则来指导推理&#xff0c;LLM显着提高了他们遵循正确推理路径的能力。我们使用PaLM-2L、GPT-4和Ll…

3102.力扣每日一题7/9 Java(TreeMap)

博客主页&#xff1a;音符犹如代码系列专栏&#xff1a;算法练习关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 目录 TreeMap详解 解题思路 解题方法 时间复杂度 空间复杂度 Code T…

imx6ull/linux应用编程学习(16)emqx ,mqtt创建连接mqtt.fx

在很多项目中都需要自己的私人服务器&#xff0c;以保证数据的隐私性&#xff0c;这里我用的是emqx。 1.进入emqx官网 EMQX&#xff1a;用于物联网、车联网和工业物联网的企业级 MQTT 平台 点击试用cloud 申请成功后可得&#xff1a;&#xff08;右边的忽略&#xff09; 进入…

【读点论文】ASAM: Boosting Segment Anything Model with Adversarial Tuning,对抗学习提升性能

ASAM: Boosting Segment Anything Model with Adversarial Tuning Abstract 在不断发展的计算机视觉领域&#xff0c;基础模型已成为关键工具&#xff0c;对各种任务表现出卓越的适应性。其中&#xff0c;Meta AI 的 Segment Anything Model (SAM) 在图像分割方面表现突出。然…

国内从事人机交互的团队——浙江工业大学

一、背景 当我们选择一个新的课题后&#xff0c;需要清楚的了解从事该方向的团队都有哪些&#xff0c;这样可以及时跟踪和学习大牛团队的最新进展&#xff0c;以免自己认为的good idea&#xff0c;其实早就已经研究过了。 随着人形机器人的发展&#xff0c;机器人不仅需要在无…

vscode使用Git的常用操作

主打一个实用 查看此篇之前请先保证电脑安装了Git&#xff0c;安装教程很多&#xff0c;可自行搜索 一.初始化本地仓库&#x1f7e2; 使用vscode打开项目文件夹如图所使初始化仓库&#xff0c;相当于命令行的git init 二.提交到暂存区&#x1f7e2; 三.提交到新版本&#x1f…

python04——类(基础new)

类其实也是一种封装的思想&#xff0c;类就是把变量、方法等封装在一起&#xff0c;然后可以通过不同的实例化对其进行调用操作。 1.类的定义 class 类名&#xff1a; 变量a def __init__ (self,参数2&#xff0c;参数2...)&#xff1a;初始化函数&#xff01;&#xff01;&…

Chromium编译指南2024 Linux篇-编译Chromium(五)

1.引言 在完成环境配置之后&#xff0c;我们需要开始实际的编译工作。编译 Chromium 是一个相对复杂且耗时的过程&#xff0c;尤其是第一次编译时。为了保证顺利完成&#xff0c;我们将使用 GN 和 Ninja 工具来生成和管理构建文件。接下来&#xff0c;我们会详细介绍如何生成构…

最新 Kubernetes 集群部署 + flannel 网络插件(保姆级教程,最新 K8S 版本)

资源列表 操作系统配置主机名IP所需插件CentOS 7.92C4Gk8s-master192.168.60.143flannel-cni-plugin、flannel、coredns、etcd、kube-apiserver、kube-controller-manager、kube-proxy、 kube-scheduler 、containerd、pause 、crictlCentOS 7.92C4Gk8s-node01192.168.60.144f…

【HarmonyOS】关于官方推荐的组件级路由Navigation的心得体会

前言 最近因为之前的630版本有点忙&#xff0c;导致断更了几天&#xff0c;现在再补上。换换脑子。 目前内测系统的华为应用市场&#xff0c;各种顶级APP陆续都放出来beta版本了&#xff0c;大体上都完成了主流程的开发。欣欣向荣的气息。 学习思路 关于学习HarmonyOS的问题…

浅谈化工厂环保管理的痛点、智慧环保的必要性及EHS系统的实现路径

在全球环保意识日益增强的背景下&#xff0c;化工厂作为工业领域的重要组成部分&#xff0c;其环保管理显得尤为重要。然而&#xff0c;化工厂在追求经济效益的同时&#xff0c;也面临着诸多环保管理的痛点。本文将围绕化工厂环保管理的痛点、化工厂为何需要智慧环保以及如何借…

Unity【入门】场景切换和游戏退出及准备

1、必备知识点场景切换和游戏退出 文章目录 1、必备知识点场景切换和游戏退出1、场景切换2、鼠标隐藏锁定相关3、随机数和自带委托4、模型资源的导入1、模型由什么构成2、Unity支持的模型格式3、如何指导美术同学导出模型4、学习阶段在哪里获取模型资源 2、小项目准备工作需求分…

小程序内容管理系统设计

设计一个小程序内容管理系统&#xff08;CMS&#xff09;时&#xff0c;需要考虑以下几个关键方面来确保其功能完善、用户友好且高效&#xff1a; 1. 需求分析 目标用户&#xff1a;明确你的目标用户群体&#xff0c;比如企业、媒体、个人博主等&#xff0c;这将决定系统的功…

Linux基础知识(十六)shell脚本编程

一、简介 用户通过shell向计算机发送指令计算机通过shell给用户返回指令的执行结果 1.1 通过shell编程可以达到的效果 提高工作效率可以实现自动化 1.2 需要学习的内容 Linuxshell的语法规范 1.3 编写shell的流程 第一步&#xff1a;用vi/vim创建一个.sh的文件第二步&am…

C++ 重载运算符 addition (+), subtraction (-) and multiplication (*)

C 重载运算符 addition , subtraction - and multiplication * 1. Operator Overloading (运算符重载)2. Developing an Operator Overloading Example2.1. Adding an Addition Operator (添加加法运算符)2.2. Overloading Restrictions (重载限制)2.3. 重载运算符 - 和 * Refe…

特征融合篇 | YOLOv10改进之在Neck网络中添加加权双向特征金字塔BiFPN

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。在计算机视觉任务中&#xff0c;特征金字塔网络&#xff08;FPN&#xff09;是一种常用的方法&#xff0c;它通过构建不同尺度的特征图来捕获不同尺度的目标。然而&#xff0c;传统的FPN存在一些缺点&#xff0c;如特征融合…

05STM32EXIT外部中断中断系统

STM32EXIT外部中断&中断系统 中断系统中断触发条件&#xff1a;中断处理流程和用途&#xff1a; STM32中断NVIC嵌套中断向量控制器基本结构 中断系统 中断触发条件&#xff1a; 对外部中断来说&#xff0c;可以是引脚发生了电平跳变 对定时器来说&#xff0c;可以是定时的…

【最强八股文 -- 计算机网络】【快速版】WWW 构建技术 (3 项)

1.HTML(HyperText Markup Language):作为页面的文本标记语言 2.HTTP(HyperTextTransfer Protocol):文档传递协议 3.URL(Uniform Resource Locator):指定文档所在地址 HTTPS 和 HTTP 的区别: HTTP: 以明文的方式在网络中传输数据&#xff0c;HTTPS 解决了HTTP 不安全的缺陷&…

.NET周刊【7月第1期 2024-07-07】

国内文章 学习.NET 8 MiniApis入门 https://www.cnblogs.com/hejiale010426/p/18280441 MiniApis是ASP.NET Core中的轻量级框架&#xff0c;用最少的代码和配置创建HTTP API。其特点包括简洁明了、性能卓越、灵活多变、易于学习使用&#xff0c;并与ASP.NET Core生态系统完美…