勁松做網(wǎng)站的公司百度一下首頁設(shè)為主頁
前端引用下載vue/element/echarts資源等引用方法
功能需求
需求是在HTML頁面中集成Vue.js、Element Plus（Element UI的Vue 3版本）、ECharts等前端資源，使用Blob下載HTML。
解決方案概述
- 直接訪問線上
CDN地址：簡單直接，但受限于外部網(wǎng)絡(luò)環(huán)境，可能導(dǎo)致加載失敗或延遲。 - 使用
國內(nèi)CDN加速：通過選擇更貼近用戶地理位置的CDN服務(wù)，提升加載速度，但仍可能受網(wǎng)絡(luò)波動(dòng)影響。 - 本地下載并引用資源：確保資源可用性，但會(huì)增加本地包體積，可能影響應(yīng)用加載速度。
- 后端服務(wù)生成并返回HTML：解決前端資源加載問題，但依賴于后端服務(wù)器性能和用戶網(wǎng)絡(luò)狀況。
這里我們主要分析一下 2/3這兩個(gè)方案
1. HTML模板構(gòu)建：
使用Element Plus的組件構(gòu)建頁面結(jié)構(gòu)。
引入必要的CSS樣式和JavaScript庫。
2. 資源引用：
使用國內(nèi)CDN服務(wù)如jsdelivr或unpkg的國內(nèi)鏡像，以減少網(wǎng)絡(luò)延遲。
確保Vue.js、Element Plus和ECharts的版本兼容性。
3. JavaScript邏輯實(shí)現(xiàn)：
使用Vue 3的Composition API（如createApp, ref, onMounted等）構(gòu)建組件邏輯。
從Element Plus中引入所需組件（如ElContainer, ElHeader, ElMain等）。
使用國內(nèi)的服務(wù) cdn加速訪問
- dome 渲染
一個(gè)button下載按鈕
<el-button @click="downloadHtml(scope.row)"> </el-button>
創(chuàng)建一個(gè)reportHtml.js文件
億點(diǎn)小知識(shí)用來導(dǎo)出這個(gè)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: ' : {c} (vxwlu0yf4%)'},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>
最后一步導(dǎo)出html方法
/*** 導(dǎo)出html*/let downLoadHtml = async(scanProjectName, scanStartTime)=> {const filledHtml = await htmlTemplate(JSON.stringify(htmlData));// 創(chuàng)建一個(gè)Blob對象，包含HTML內(nèi)容const blob = new Blob([filledHtml], {type: 'text/html'});// 創(chuàng)建一個(gè)鏈接元素并設(shè)置其href屬性為Blob對象的URLconst url = window.URL.createObjectURL(blob);const link = document.createElement('a');link.href = url;link.setAttribute('download', '測試文件'+.html'); // 設(shè)置下載文件名// 觸發(fā)點(diǎn)擊事件來下載文件document.body.appendChild(link);link.click();document.body.removeChild(link); // 之后移除鏈接元素
}
以上就是簡單的cdn加速來引入資源
使用訪問本地資源進(jìn)行加載
這里我們只需要改變的是reportHtml.js里面的代碼
億點(diǎn)小知識(shí)這里我們利用 axios請求的方法來訪問本地資源
首先引入axios
import axios from "axios";
優(yōu)化方法
這里的邏輯是用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>
總結(jié)
通過Axios從服務(wù)器獲取CSS和JavaScript文件的內(nèi)容，并將這些內(nèi)容直接嵌入到HTML字符串中。然而，這種方法有幾個(gè)問題和限制，特別是在處理大型CSS和JS文件時(shí)，以及安全性和維護(hù)性方面。
首先，將CSS和JS文件的內(nèi)容直接嵌入到HTML字符串中通常不是一個(gè)好的做法，因?yàn)檫@會(huì)使生成的HTML文件變得非常大，增加了頁面加載時(shí)間和內(nèi)存使用。此外，這樣做還可能導(dǎo)致跨站腳本（XSS）攻擊的風(fēng)險(xiǎn)增加，因?yàn)檎趧?dòng)態(tài)地執(zhí)行從服務(wù)器獲取的JavaScript代碼。
其次，對于Vue.js和Element Plus等現(xiàn)代前端框架和庫，它們通常包含復(fù)雜的依賴關(guān)系和優(yōu)化策略，這些在直接通過Ajax請求并嵌入到HTML中時(shí)可能無法正確處理。
對于下載到本地這種并不推薦
直接在script標(biāo)簽中使用CDN URL或本地路徑是更簡單、更有效的方法
如碰到其他的問題 可以私下我 一起探討學(xué)習(xí)
如果對你有所幫助還請 點(diǎn)贊 收藏謝謝~！
關(guān)注收藏博客 作者會(huì)持續(xù)更新…