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

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

news 2026/5/24 19:50:08

前端引用下载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或本地路径是更简单、更有效的方法
在这里插入图片描述
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…

相关文章：

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

前端引用下载vue/element/echarts资源等引用方法 功能需求 需求是在HTML页面中集成Vue.js、Element Plus&#xff08;Element UI的Vue 3版本&#xff09;、ECharts等前端资源&#xff0c;使用Blob下载HTML。 解决方案概述 直接访问线上CDN地址&#xff1a;简单直接&#xff0c…...

编程日记 2024/7/5 13:21:11

昇思MindSpore学习笔记2-01 LLM原理和实践 --基于 MindSpore 实现 BERT 对话情绪识别

摘要&#xff1a; 通过识别BERT对话情绪状态的实例&#xff0c;展现在昇思MindSpore AI框架中大语言模型的原理和实际使用方法、步骤。 一、环境配置 %%capture captured_output # 实验环境已经预装了mindspore2.2.14&#xff0c;如需更换mindspore版本&#xff0c;可更改下…...

编程日记 2024/7/5 13:20:10

uniapp实现图片懒加载 封装组件

想要的效果就是窗口滑动到哪里&#xff0c;哪里的图片进行展示 主要原理使用IntersectionObserver <template><view><image error"HandlerError" :style"imgStyle" :src"imageSrc" :id"randomId" :mode"mode&quo…...

编程日记 2024/7/5 13:19:09

持续交付：自动化测试与发布流程的变革

目录 前言1. 持续交付的概念1.1 持续交付的定义1.2 持续交付的核心原则 2. 持续交付的优势2.1 提高交付速度2.2 提高软件质量2.3 降低发布风险2.4 提高团队协作 3. 实施持续交付的步骤3.1 构建自动化测试体系3.1.1 单元测试3.1.2 集成测试3.1.3 功能测试3.1.4 性能测试 3.2 构建…...

编程日记 2024/7/5 13:18:08

VBA常用的字符串内置函数

前言 在VBA程序中&#xff0c;常用的内置函数可以按照功能分为字符串函数、数字函数、转换函数等等&#xff0c;本节主要会介绍常用的字符串的内置函数&#xff0c;包括Len()、Left()、Mid()、Right()、Split()、String()、StrConV()等。 本节的练习数据表以下表为例&#xff…...

编程日记 2024/7/5 13:17:06

大数据面试题之Spark(7)

目录 Spark实现wordcount Spark Streaming怎么实现数据持久化保存? Spark SQL读取文件&#xff0c;内存不够使用&#xff0c;如何处理? Spark的lazy体现在哪里? Spark中的并行度等于什么 Spark运行时并行度的设署 Spark SQL的数据倾斜 Spark的exactly-once Spark的…...

编程日记 2024/7/5 13:16:05

AI绘画 Stable Diffusion图像的脸部细节控制——采样器全解析

大家好&#xff0c;我是画画的小强 我们在运用AI绘画 Stable Diffusion 这一功能强大的AI绘图工具时&#xff0c;我们往往会发现自己对提示词的使用还不够充分。在这种情形下&#xff0c;我们应当如何调整自己的策略&#xff0c;以便更加精确、全面地塑造出理想的人物形象呢&a…...

编程日记 2024/7/5 13:15:04

liunx离线安装Firefox

在Linux系统中离线安装Firefox浏览器&#xff0c;您需要先从Mozilla的官方网站下载Firefox的安装包&#xff0c;然后通过终端进行安装。以下是详细的步骤&#xff1a; 准备工作 下载Firefox安装包&#xff1a; 首先&#xff0c;在一台可以上网的电脑上访问Firefox官方下载页面…...

编程日记 2024/7/5 13:14:03

UNet进行病理图像分割

数据集链接&#xff1a;https://pan.baidu.com/s/1IBe_P0AyHgZC39NqzOxZhA?pwdnztc 提取码&#xff1a;nztc UNet模型 import torch import torch.nn as nnclass conv_block(nn.Module):def __init__(self, ch_in, ch_out):super(conv_block, self).__init__()self.conv nn…...

编程日记 2024/7/5 13:13:02

初二数学基础差从哪开始补？附深度解析！

有时候&#xff0c;当你推不开一扇门的时候&#xff0c;不要着急&#xff0c;试着反方向拉一下&#xff0c;或者横向拉一下。下面是小偏整理的初二数学基础差从哪开始补2021年&#xff0c;感谢您的每一次阅读。 　　初二数学基础差从哪开始补2021年 　　第一个问题是很多同学都…...

编程日记 2024/7/5 13:12:01

【C语言】return 关键字

在C语言中&#xff0c;return是一个关键字&#xff0c;用于从函数中返回值或者结束函数的执行。它是函数的重要组成部分&#xff0c;负责将函数的计算结果返回给调用者&#xff0c;并可以提前终止函数的执行。 主要用途和原理&#xff1a; 返回值给调用者&#xff1a; 当函数执…...

编程日记 2024/7/5 13:08:58

华为机试HJ13句子逆序

华为机试HJ13句子逆序 题目&#xff1a; 将一个英文语句以单词为单位逆序排放。例如“I am a boy”&#xff0c;逆序排放后为“boy a am I”所有单词之间用一个空格隔开&#xff0c;语句中除了英文字母外&#xff0c;不再包含其他字符 想法&#xff1a; 将输入的字符串通过…...

编程日记 2024/7/5 13:07:57

代码随想录day40 动态规划（5）

52. 携带研究材料&#xff08;第七期模拟笔试&#xff09; (kamacoder.com) 完全背包&#xff0c;可重复放入物品&#xff0c;需要用一维滚动数组从前往后遍历。 由于第0个物品和后面物品的转移方程没有区别&#xff0c;可以不额外初始化dp数组&#xff0c;直接用元素全0的d…...

编程日记 2024/7/5 13:06:56

FFmpeg 命令行 音视频格式转换

&#x1f4da;&#xff1a;FFmpeg 提供了丰富的命令行选项和功能&#xff0c;可以用来处理音视频文件、流媒体等&#xff0c;掌握命令行的使用&#xff0c;可以有效提高工作效率。 目录 一、视频转换和格式转换 &#x1f535; 将视频文件转换为另一种格式 &#x1f535; 指定…...

编程日记 2024/7/5 13:03:53

Jmeter使用JSON Extractor提取多个变量

1.当正则不好使时&#xff0c;用json extractor 2.提取多个值时&#xff0c;默认值必填&#xff0c;否则读不到变量...

编程日记 2024/7/5 13:02:52

c++ 设计模式 的课本范例（下）

&#xff08;19&#xff09; 桥接模式 Bridge&#xff0c;不是采用类继承&#xff0c;而是采用类组合&#xff0c;一个类的数据成员是类对象&#xff0c;来扩展类的功能。源码如下&#xff1a; class OS // 操作系统负责绘图 { public:virtual ~OS() {}virtual void draw(cha…...

编程日记 2024/7/5 13:01:50

结合数据索引结构看SQL的真实执行过程

引言 关于数据库设计与优化的前几篇文章中&#xff0c;我们提到了数据库设计优化应该遵守的指导原则、数据库底层的索引组织结构、数据库的核心功能组件以及SQL的解析、编译等。这些其实都是在为SQL的优化、执行的理解打基础。 今天这篇文章&#xff0c;我们以MySQL中InnoDB存…...

编程日记 2024/7/5 13:00:49

spark shuffle——shuffle管理

ShuffleManager shuffle系统的入口。ShuffleManager在driver和executor中的sparkEnv中创建。在driver中注册shuffle&#xff0c;在executor中读取和写入数据。 registerShuffle&#xff1a;注册shuffle&#xff0c;返回shuffleHandle unregisterShuffle&#xff1a;移除shuff…...

编程日记 2024/7/5 12:59:48

HTMLCSS（入门）

HTML <html> <head><title>第一个页面</title></head><body>键盘敲烂&#xff0c;工资过万</body> </html> <!DOCTYPE>文档类型声明&#xff0c;告诉浏览器使用哪种HTML版本显示网页 <!DOCTYPE html>当前页面采取…...

编程日记 2024/7/5 12:58:47

富格林：曝光可信策略制止亏损

富格林指出&#xff0c;相信大家都对黄金投资的价值空间有目共睹&#xff0c;现如今黄金市场波动频繁&#xff0c;因此不少投资者也开始加入该市场试图赢得额外的财富。但作为新手投资者贸贸然地进场操作&#xff0c;亏损的几率是很大的&#xff0c;因此要学会掌握正规平台曝光…...

编程日记 2024/7/5 12:56:45

ssm大健康老年公寓管理系统（10093）

有需要的同学&#xff0c;源代码和配套文档领取&#xff0c;加文章最下方的名片哦 一、项目演示 项目演示视频 二、资料介绍 完整源代码&#xff08;前后端源代码SQL脚本&#xff09;配套文档&#xff08;LWPPT开题报告/任务书&#xff09;远程调试控屏包运行一键启动项目&…...

编程新知 2026/5/24 19:43:19

Android应用架构规范深度解析与面试指南

引言 在Android应用开发中，架构设计是确保应用可维护性、可扩展性和稳定性的核心要素。随着移动应用的复杂度日益增加，采用规范的架构模式不仅能提升开发效率，还能减少错误和重构成本。本文将以“架构规范”为核心重点领域，深入探讨Android应用的主流架构模式、实现细节、…...

编程新知 2026/5/24 17:45:47

显存直降68%、推理提速3.2倍，DeepSeek-V2量化部署方案全解析，仅限首批内测团队流出

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;DeepSeek-V2量化部署方案全景概览 DeepSeek-V2作为高性能开源大语言模型&#xff0c;在实际生产环境中面临显存占用高、推理延迟大等挑战。量化部署是实现低资源开销与高吞吐并存的关键路径&#xff0c;本章…...

编程新知 2026/5/24 16:00:55

MASA模组全家桶中文资源包：为中文玩家打造的无缝本地化体验终极指南

MASA模组全家桶中文资源包&#xff1a;为中文玩家打造的无缝本地化体验终极指南 【免费下载链接】masa-mods-chinese 一个masa mods的汉化资源包 项目地址: https://gitcode.com/gh_mirrors/ma/masa-mods-chinese 你是否曾经在Minecraft中面对MASA模组复杂的英文界面感到…...

编程新知 2026/5/24 15:48:23

VisualGGPK2游戏资源编辑器：流放之路玩家的终极MOD制作指南

VisualGGPK2游戏资源编辑器&#xff1a;流放之路玩家的终极MOD制作指南 【免费下载链接】VisualGGPK2 Library for Content.ggpk of PathOfExile (Rewrite of libggpk) 项目地址: https://gitcode.com/gh_mirrors/vi/VisualGGPK2 你是否曾经想要修改《流放之路》的游戏界…...

编程新知 2026/5/24 12:44:32

如何在3分钟内完成Windows与Office批量激活：开源KMS工具完整指南

如何在3分钟内完成Windows与Office批量激活&#xff1a;开源KMS工具完整指南 【免费下载链接】KMS_VL_ALL_AIO Smart Activation Script 项目地址: https://gitcode.com/gh_mirrors/km/KMS_VL_ALL_AIO 如果您正在寻找一个简单高效的Windows与Office批量激活解决方案&…...

编程新知 2026/5/24 12:06:36

如何通过Atmosphere-stable的分层架构设计彻底改造你的Switch游戏体验

如何通过Atmosphere-stable的分层架构设计彻底改造你的Switch游戏体验 【免费下载链接】Atmosphere-stable 大气层整合包系统稳定版 项目地址: https://gitcode.com/gh_mirrors/at/Atmosphere-stable 当你的Nintendo Switch游戏加载时间超过30秒&#xff0c;当系统界面响…...

编程新知 2026/5/24 11:26:33

Adobe全系列软件激活指南：5分钟掌握GenP 3.0终极破解技巧

Adobe全系列软件激活指南&#xff1a;5分钟掌握GenP 3.0终极破解技巧 【免费下载链接】Adobe-GenP Adobe CC 2019/2020/2021/2022/2023 GenP Universal Patch 3.0 项目地址: https://gitcode.com/gh_mirrors/ad/Adobe-GenP 你是否在为Adobe Creative Cloud的高昂订阅费用…...

编程新知 2026/5/24 11:18:01

Linuxptp从入门到排查：一份覆盖安装、配置与常见报错解决的保姆级指南

Linuxptp从入门到排查&#xff1a;一份覆盖安装、配置与常见报错解决的保姆级指南当你在数据中心里部署高精度时间同步服务时&#xff0c;突然发现日志里不断跳出master offset超限警告&#xff1b;或者当你按照教程配置完ptp4l后&#xff0c;时钟状态始终卡在s0无法锁定——这…...

编程新知 2026/5/24 11:05:21

终极塔科夫离线存档编辑器：5步掌握SPT-AKI Profile Editor完整指南

终极塔科夫离线存档编辑器&#xff1a;5步掌握SPT-AKI Profile Editor完整指南 【免费下载链接】SPT-AKI-Profile-Editor Программа для редактирования профиля игрока на сервере SPT-AKI 项目地址: https://gitcode.com/…...

编程新知 2026/5/24 10:46:15