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

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