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

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

news 2025/7/8 8:33:20

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

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

在这里插入图片描述

解决方案概述

直接访问线上CDN地址：简单直接，但受限于外部网络环境，可能导致加载失败或延迟。
使用国内CDN加速：通过选择更贴近用户地理位置的CDN服务，提升加载速度，但仍可能受网络波动影响。
本地下载并引用资源：确保资源可用性，但会增加本地包体积，可能影响应用加载速度。
后端服务生成并返回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加速访问

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资源等引用方法

使用国内的服务 cdn加速访问

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

总结

相关文章：

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

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

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

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

VBA常用的字符串内置函数

大数据面试题之Spark(7)

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

liunx离线安装Firefox

UNet进行病理图像分割

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

【C语言】return 关键字

华为机试HJ13句子逆序

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

FFmpeg 命令行音视频格式转换

Jmeter使用JSON Extractor提取多个变量

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

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

spark shuffle——shuffle管理

HTMLCSS（入门）

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

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

微信小程序之bind和catch

什么是库存周转？如何用进销存系统提高库存周转率？

如何在看板中有效管理突发紧急任务

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

镜像里切换为普通用户

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

拉力测试cuda pytorch 把 4070显卡拉满

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词