前端引用vue/element/echarts资源等引用方法Blob下载HTML

前端引用下载vue/element/echarts资源等引用方法

功能需求
需求是在HTML页面中集成Vue.js、Element Plus（Element UI的Vue 3版本）、ECharts等前端资源，使用Blob下载HTML。

在这里插入图片描述

解决方案概述

  1. 直接访问线上CDN地址：简单直接，但受限于外部网络环境，可能导致加载失败或延迟。
  2. 使用国内CDN加速：通过选择更贴近用户地理位置的CDN服务，提升加载速度，但仍可能受网络波动影响。
  3. 本地下载并引用资源：确保资源可用性，但会增加本地包体积，可能影响应用加载速度。
  4. 后端服务生成并返回HTML：解决前端资源加载问题，但依赖于后端服务器性能和用户网络状况。

这里我们主要分析一下 2/3这两个方案

1. HTML模板构建：
使用Element Plus的组件构建页面结构。
引入必要的CSS样式和JavaScript库。
2. 资源引用：
使用国内CDN服务如jsdelivr或unpkg的国内镜像，以减少网络延迟。
确保Vue.js、Element Plus和ECharts的版本兼容性。
3. JavaScript逻辑实现：
使用Vue 3的Composition API（如createApp, ref, onMounted等）构建组件逻辑。
从Element Plus中引入所需组件（如ElContainer, ElHeader, ElMain等）。

使用国内的服务 cdn加速访问
  1. dome 渲染

一个button下载按钮

<el-button @click="downloadHtml(scope.row)"> </el-button>

创建一个reportHtml.js文件

亿点小知识 用来导出这个html的js这样更加语义化

export const htmlTemplate = async(htmlData) => {return 	`<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
</head>
<style>* {margin: 0;padding: 0;}.content-container {margin-top: 20px;}
</style>
<body>
<div id="app"><el-container style="background-color: #EFF3F6"></el-container></el-container>
</div><!-- 引入 Vue 3 --><script src="https://cdn.jsdelivr.net/npm/vue@3.2.37/dist/vue.global.prod.js"></script>
<!-- 引入 Element Plus --><script src="https://cdn.jsdelivr.net/npm/element-plus@2.7.0/dist/index.full.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<script>const { createApp,ref, onMounted } = Vue;const { ElContainer, ElHeader, ElMain, ElTable, ElTableColumn } = ElementPlus;const app = createApp({setup() {const baseInfo =  ref(${htmlData}.baseInfo)const bugTableData=  ref(${htmlData}.bugTableData)const moduleTableData=  ref(${htmlData}.moduleTableData)const bugTotalData = ref([{name: '高危',itemStyle: {color: '#e06666'}, value: baseInfo.value.codesVulnHighNum},{name: '中危',itemStyle: {color: '#5555ff'}, value: baseInfo.value.codesVulnMediumNum},{name: '低危',itemStyle: {color: '#69cc73'}, value: baseInfo.value.codesVulnLowNum},])const initECharts = () =>{const chartDom = document.getElementById('bugTotal')const myChart = echarts.init(chartDom);const option = {title: {text: '漏洞概览',left: 'center'},tooltip: {trigger: 'item',formatter: '{b} : {c} ({d}%)'},legend: {top: 'bottom'},series: [{type: 'pie',radius: '65%',center: ['50%', '50%'],selectedMode: 'single',emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}},labelLine: {show: true},data: bugTotalData.value}]}myChart.setOption(option);}onMounted(() => {initECharts();})return {baseInfo,bugTableData,moduleTableData,highTableData,mediumTableData,}}});app.use(ElementPlus);app.mount('#app');
</script>
</body>
</html>`
};</script>

最后一步导出html方法

/*** 导出html*/let downLoadHtml = async(scanProjectName, scanStartTime)=> {const filledHtml = await htmlTemplate(JSON.stringify(htmlData));// 创建一个Blob对象，包含HTML内容const blob = new Blob([filledHtml], {type: 'text/html'});// 创建一个链接元素并设置其href属性为Blob对象的URLconst url = window.URL.createObjectURL(blob);const link = document.createElement('a');link.href = url;link.setAttribute('download', '测试文件'+.html'); // 设置下载文件名// 触发点击事件来下载文件document.body.appendChild(link);link.click();document.body.removeChild(link); // 之后移除链接元素
}

以上就是简单的cdn加速来引入资源

使用访问本地资源进行加载

这里我们只需要改变的是reportHtml.js里面的代码

亿点小知识这里我们利用 axios请求的方法来访问本地资源

首先引入axios

import axios from "axios";

优化方法

这里的逻辑是用axios去请求本地资源来引入 使用变量去使用

export const htmlTemplate = async(htmlData) => {let indexCss=``let vue3=``await axios.get('https://unpkg.com/element-plus/dist/index.css').then(res=>{indexCss = res.data})await axios.get('/public/vue.global.prod.js').then(res=>{vue3 = res.data})return`<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title>
<style>${indexCss}</style>
</head><style>* {margin: 0;padding: 0;}.content-container {margin-top: 20px;}
</style>
<script>${vue3}</script>
总结

通过Axios从服务器获取CSS和JavaScript文件的内容，并将这些内容直接嵌入到HTML字符串中。然而，这种方法有几个问题和限制，特别是在处理大型CSS和JS文件时，以及安全性和维护性方面。

首先，将CSS和JS文件的内容直接嵌入到HTML字符串中通常不是一个好的做法，因为这会使生成的HTML文件变得非常大，增加了页面加载时间和内存使用。此外，这样做还可能导致跨站脚本（XSS）攻击的风险增加，因为正在动态地执行从服务器获取的JavaScript代码。

其次，对于Vue.js和Element Plus等现代前端框架和库，它们通常包含复杂的依赖关系和优化策略，这些在直接通过Ajax请求并嵌入到HTML中时可能无法正确处理。
对于下载到本地这种并不推荐
直接在script标签中使用CDN URL或本地路径是更简单、更有效的方法
在这里插入图片描述
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

计算机网络(2

计算机网络(2

计算机网络续 一. 网络编程 网络编程, 指网络上的主机, 通过不同的进程, 以编程的方式实现网络通信(或网络数据传输). 即便是同一个主机, 只要不同进程, 基于网络来传输数据, 也属于网络编程. 二. 网络编程套接字(socket) socket: 操作系统提供的网络编程的 API 称作 “soc…
阅读更多...
【数据结构与算法】堆排序算法原理与实现：基于堆实现的高效排序算法

【数据结构与算法】堆排序算法原理与实现：基于堆实现的高效排序算法

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《数据结构与算法》 期待您的关注 ​ 目录 一、引言 堆排序的简介 堆排序的特点 二、堆的概念 三、堆排序算法的原理 四、堆…
阅读更多...
软件测试面试1000问（含答案）

软件测试面试1000问（含答案）

1、自动化代码中,用到了哪些设计模式? 单例设计模式工厂模式PO设计模式数据驱动模式面向接口编程设计模式 2、什么是断言( Assert) ? 断言Assert用于在代码中验证实际结果是不是符合预期结果&#xff0c;如果测试用例执行失败会抛出异常并提供断言日志 3、什么是web自动化…
阅读更多...
数据结构预科

数据结构预科

在堆区申请两个长度为32的空间&#xff0c;实现两个字符串的比较【非库函数实现】 要求&#xff1a; 1> 定义函数&#xff0c;在对区申请空间&#xff0c;两个申请&#xff0c;主函数需要调用2次 2> 定义函数&#xff0c;实现字符串的输入&#xff0c;void input(char …
阅读更多...
Jenkins容器的部署

Jenkins容器的部署

本文主要是记录如何在Centos7上安装docker，以及在docker里面配置tomcat、mysql、jenkins等环境。 一、安装docker 1.1 准备工作 centos7、VMware17Pro 1.2 通过yum在线安装dokcer yum -y install docker1.3 启动docker服务 systemctl start docker.service1.4 查看docke…
阅读更多...
Java传引用问题

Java传引用问题

本文将介绍 Java 中的引用传递&#xff0c;包括其定义、实现方式、通过引用修改原来指向的内容和通过引用修改当前引用的指向的区别 目录 1、引用传递的概念 2、引用传递的实现方式 3、传引用会发生的两种情况&#xff1a; 通过引用修改当前引用的指向 通过引用修改原来指…
阅读更多...
《数据仓库与数据挖掘》 总复习

《数据仓库与数据挖掘》 总复习

试卷组成 第一章图 第二章图 第三章图 第四章图 第五章图 第六章图 第九章图 第一章 DW与DM概述 &#xff08;特点、特性&#xff09; DB到DW 主要特征 &#xff08;1&#xff09;数据太多&#xff0c;信息贫乏&#xff08;Data Rich&#xff0c; Information Poor)。 &a…
阅读更多...
H2 Database Console未授权访问漏洞封堵

H2 Database Console未授权访问漏洞封堵

背景 H2 Database Console未授权访问&#xff0c;默认情况下自动创建不存在的数据库&#xff0c;从而导致未授权访问。各种未授权访问的教程&#xff0c;但是它怎么封堵呢&#xff1f; -ifExists 很简单&#xff0c;启动参数添加 -ifExists &#xff0c;它的含义&#xff1a…
阅读更多...
【机器学习】机器学习的重要方法——线性回归算法深度探索与未来展望

【机器学习】机器学习的重要方法——线性回归算法深度探索与未来展望

欢迎来到 破晓的历程博客 引言 在数据科学日益重要的今天&#xff0c;线性回归算法以其简单、直观和强大的预测能力&#xff0c;成为了众多领域中的基础工具。本文将详细介绍线性回归的基本概念、核心算法&#xff0c;并通过五个具体的使用示例来展示其应用&#xff0c;同时探…
阅读更多...
CASS7.0按方向和距离绘制图形

CASS7.0按方向和距离绘制图形

1、绘制工具 2、按方向和距离绘制 &#xff08;1&#xff09;切换方向 &#xff08;2&#xff09;距离输入
阅读更多...
Python函数缺省参数的 “ 坑 ” （与C++对比学习）

Python函数缺省参数的 “ 坑 ” （与C++对比学习）

我们都知道Python函数的缺省参数可以降低我们调用函数的成本&#xff0c;但是一般我们的缺省参数都是不可变对象&#xff0c;如果是可变对象&#xff0c;我们对其多次调用会发生什么呢&#xff1f; def func(arr[]):arr.append(Hello)print(arr)func() func() func() 这貌似…
阅读更多...
MongoDB-社区版-本地安装

MongoDB-社区版-本地安装

系统&#xff1a;win10 1. 下载server:Download MongoDB Community Server | MongoDB 我选的zip包 2. 下载shell&#xff1a;MongoDB Shell Download | MongoDB 我选的zip包 3. 启动server 4. 启动shell, 完成
阅读更多...
MYSQL函数进阶详解：案例解析（第19天）

MYSQL函数进阶详解：案例解析（第19天）

系列文章目录 一、MySQL的函数&#xff08;重点&#xff09; 二、MySQL的窗口函数&#xff08;重点&#xff09; 三、MySQL的视图&#xff08;熟悉&#xff09; 四、MySQL的事务&#xff08;熟悉&#xff09; 文章目录 系列文章目录前言一、MySQL的函数1. 聚合函数2. group_c…
阅读更多...
Redis 多数据源自定义配置 Spring Boot 升级版

Redis 多数据源自定义配置 Spring Boot 升级版

文章目录 1.前言2.git 示例地址3.需求4.代码实现4.1 application.properties 配置文件4.2 获取 application.properties 中的 redis 配置4.2.1 Environment 对象来获取自定义 redis 配置 4.3 初始化 RedisTemplate 对象&#xff0c;并注册到 Spring IOC 容器4.3.1 初始化方法4.…
阅读更多...
spring boot （shiro）+ websocket测试连接不上的简单检测处理

spring boot （shiro）+ websocket测试连接不上的简单检测处理

1、用前端连接测试的demo一切正常&#xff0c;但是到了项目中连接不上了 一开始以为是地址错&#xff0c;但是换了apifox测试也是不可以。 2、考虑是shiro进行了拦截了&#xff0c;所以就访问不到了地址&#xff0c;那么就放行。 3、再次用apifox测试&#xff0c;成功了。 当然…
阅读更多...
马拉松报名小程序的设计

马拉松报名小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;赛事信息管理&#xff0c;赛事报名管理&#xff0c;活动商城管理&#xff0c;留言板管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;赛事信息&…
阅读更多...
C++:智能指针

C++:智能指针

目录 前言 1.内存泄漏及其危害 2.内存泄漏分类&#xff1a; 3.如何检测内存泄漏 4.如何避免内存泄漏 一、为什么需要智能指针&#xff1f; 二、智能指针的使用及其原理 1.RAII 2.智能指针 3.std::auto_ptr 4.std::unique_ptr 5.std::shared_ptr 6.std::weak_ptr…
阅读更多...
SA 注册流程

SA 注册流程

目录 1. UE开机后按照3GPP TS 38.104定义的Synchronization Raster搜索特定频点 2.UE尝试检测PSS/SSS&#xff0c;取得下行时钟同步&#xff0c;并获取小区的PCI&#xff1b;如果失败则转步骤1搜索下一个频点&#xff1b;否则继续后续步骤&#xff1b; 3.解析Mib&#xff0c;…
阅读更多...
从0到1构建渠道运营体系：实战案例与策略指南

从0到1构建渠道运营体系：实战案例与策略指南

引言 在当今竞争激烈的市场环境中&#xff0c;有效的渠道运营是企业实现产品或服务快速触达目标用户、提升市场份额的关键。从零开始构建一个高效的渠道运营体系&#xff0c;不仅需要深思熟虑的策略规划&#xff0c;还需要灵活应变的实战操作。本文将结合实战案例&#xff0c;…
阅读更多...
JDK新特性之协程

JDK新特性之协程

在 JVM 中&#xff0c;java 线程直接映射内核线程&#xff0c;因此 java 线程的创建、销毁和调度都要依赖内核态的操作&#xff08;系统调用&#xff09;。而协程是真正的用户线程&#xff0c;如上图所示很多的协程可以映射很少的几个内核线程&#xff0c;并且协程的创建、销毁…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023