前端引用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下载按钮

javascript 复制代码

<el-button @click="downloadHtml(scope.row)"> </el-button>

创建一个reportHtml.js文件

亿点小知识 用来导出这个html的js这样更加语义化

javascript 复制代码

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方法

javascript 复制代码

/**
 * 导出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

javascript 复制代码

import axios from "axios";

优化方法

这里的逻辑是用axios去请求本地资源来引入使用变量去使用

javascript 复制代码

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或本地路径是更简单、更有效的方法

如碰到其他的问题可以私下我一起探讨学习

如果对你有所帮助还请点赞收藏谢谢~！

关注收藏博客作者会持续更新...