个人做网站开工作室,石家庄网站优化排名推广,移动网站开发框架,中国建设教育协会的是假网站吗前端引用下载vue/element/echarts资源等引用方法 功能需求 需求是在HTML页面中集成Vue.js、Element Plus#xff08;Element UI的Vue 3版本#xff09;、ECharts等前端资源#xff0c;使用Blob下载HTML。 解决方案概述
直接访问线上CDN地址#xff1a;简单直接#xff0c…前端引用下载vue/element/echarts资源等引用方法 功能需求 需求是在HTML页面中集成Vue.js、Element PlusElement 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 clickdownloadHtml(scope.row) /el-button创建一个reportHtml.js文件 亿点小知识 用来导出这个html的js这样更加语义化 export const htmlTemplate async(htmlData) {return !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试/titlelink relstylesheet hrefhttps://unpkg.com/element-plus/dist/index.css
/head
style* {margin: 0;padding: 0;}.content-container {margin-top: 20px;}
/style
body
div idappel-container stylebackground-color: #EFF3F6/el-container/el-container
/div!-- 引入 Vue 3 --script srchttps://cdn.jsdelivr.net/npm/vue3.2.37/dist/vue.global.prod.js/script
!-- 引入 Element Plus --script srchttps://cdn.jsdelivr.net/npm/element-plus2.7.0/dist/index.full.js/script
script srchttps://cdn.jsdelivr.net/npm/echarts5.5.0/dist/echarts.min.js/script
scriptconst { 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 indexCsslet vue3await 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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试/title
style${indexCss}/style
/headstyle* {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或本地路径是更简单、更有效的方法 如碰到其他的问题 可以私下我 一起探讨学习 如果对你有所帮助还请 点赞 收藏谢谢~ 关注收藏博客 作者会持续更新…
