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