通过JavaScript导出HTML为Excel：网络图片无法显示的问题

直接通过HTML导出的Excel文件不会自动加载网络图片，因为Excel对<img>标签的网络URL支持有限。下面提供三种可行的解决方法：

方法一：利用Excel专属XML标记插入网络图片（无需提前下载） #

通过Excel的urn:schemas-microsoft-com:office:office命名空间，在HTML的mso条件注释中添加图片的XML定义，指定图片的位置、URL和尺寸。

修改你提供的HTML代码如下：

<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">
    <meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">
    <head> 
    <style>
    </style>
    <!--[if gte mso 9]>
    <xml>
        <x:ExcelWorkbook>
            <x:ExcelWorksheets>
                <x:ExcelWorksheet>
                    <x:Name>2022-11-14</x:Name>
                    <x:WorksheetOptions>
                        <x:DisplayGridlines/>
                    </x:WorksheetOptions>
                    <!-- 添加图片的XML定义 -->
                    <x:Drawings>
                        <x:Drawing>
                            <x:OneCellAnchor>
                                <!-- 图片锚定到A1单元格（行列从0开始计数） -->
                                <x:From>
                                    <x:Col>0</x:Col>
                                    <x:ColOff>0</x:ColOff>
                                    <x:Row>0</x:Row>
                                    <x:RowOff>0</x:RowOff>
                                </x:From>
                                <!-- 图片尺寸：200px宽、100px高（1px≈9525 EMU） -->
                                <x:Ext cx="1905000" cy="952500"/>
                                <x:Picture>
                                    <x:ClientData>
                                        <x:Anchor>1</x:Anchor>
                                        <x:AutoPict/>
                                        <x:CropBottom>0</x:CropBottom>
                                        <x:CropLeft>0</x:CropLeft>
                                        <x:CropRight>0</x:CropRight>
                                        <x:CropTop>0</x:CropTop>
                                    </x:ClientData>
                                    <x:Data ss:Type="String" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg</x:Data>
                                </x:Picture>
                            </x:OneCellAnchor>
                        </x:Drawing>
                    </x:Drawings>
                </x:ExcelWorksheet>
            </x:ExcelWorksheets>
        </x:ExcelWorkbook>
    </xml><![endif]-->
    </head>
    <body>
    <table id="table1" class="jss171" cellpadding="5" cellspacing="0" style="border:solid 1px #000">
        <tbody>
            <tr>
                <td style="text-align:left;height:100px"></td>
                <td colspan="4"></td>
            </tr>
        </tbody>
    </table>
    </body>
</html>

注：原HTML中的<img>标签可移除，XML定义的图片会直接显示在指定单元格位置。

方法二：将网络图片转为Base64嵌入HTML #

Excel支持直接显示Base64编码的图片，你可以先通过代码下载网络图片并转为Base64格式，再替换<img>标签的src属性：

修改后的<img>标签示例：

<img style="width:200px" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iNjAiPgo8cGF0aCBkPSJ...（省略剩余Base64编码内容）"/>

该方法的优势是图片嵌入在文件内，打开时无需依赖网络，但会增加文件体积。

方法三：使用VBA宏自动加载网络图片 #

如果用户可启用Excel宏，导出后可运行以下VBA代码，自动遍历加载网络图片：

Sub LoadWebImages()
    Dim ws As Worksheet
    Dim cell As Range
    Dim imgURL As String
    Dim shp As Shape
    
    Set ws = ActiveSheet
    ' 遍历所有单元格，识别并加载图片URL
    For Each cell In ws.UsedRange
        If cell.Value Like "http*://*.svg" Or cell.Value Like "http*://*.png" Or cell.Value Like "http*://*.jpg" Then
            imgURL = cell.Value
            On Error Resume Next
            Set shp = ws.Shapes.AddPicture(imgURL, msoFalse, msoTrue, cell.Left, cell.Top, cell.Width, cell.Height)
            On Error GoTo 0
        End If
    Next cell
End Sub

注：需确保图片URL已放在对应单元格中，或根据实际导出结构调整代码的识别逻辑。

内容的提问来源于stack exchange，提问作者Hüseyin Z.