使用Datatables.js为XLSX导出单元格添加OpenXML超链接失败求助

我试过所有能想到和找到的方法，甚至ChatGPT提供的方案也不奏效。目前需要通过Datatables.js自定义Excel导出按钮功能，为单元格创建带指定文本的超链接。

执行步骤 #

• 定位目标单元格
• 创建<Relationship>标签并添加指向对应单元格的必要属性
• 将<Relationship>标签注入<Relationships>文档
• 创建<hyperlink>元素
• 添加指向<Relationship>标签的必要属性
• 将<hyperlink>标签追加到单元格的<c>标签中

生成的XML结构 #

单元格XML

<c t="inlineString" r="E54">
    <is>
        <hyperlink r:id="rId3" xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships">
            <t>Click here</t>
        </hyperlink>
    </is>
</c>

对应关系XML

<Relationship Id="rId3" Target="https://google.com" TargetMode="External" xmlns="http://schemas.openxmlformats.org/package/2006/relationships" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/hyperlink"></Relationship>

我编辑了工作簿关系文件，也尝试过另一处关系文件，但都没有效果。

相关代码 #

JavaScript代码

const options = {
    dom: 'B',
    paging: false,
    searching: false,
    buttons: [
        { extend: 'excel', title: 'Survey Reports', className: 'btn-sm', text: 'Export to excel',
            customize: function(xlsx, button, dt, config) {

                // 获取.xlsx文件中第一个工作表的数据
                const sheet = xlsx.xl.worksheets['sheet1.xml']
                const relationships = xlsx.xl._rels['workbook.xml.rels'].querySelector('Relationships')
                const rows = sheet.querySelectorAll('row')

                // 给worksheet元素添加属性
                const worksheetElem = sheet.querySelector('worksheet')
                worksheetElem.setAttribute('xmlns:xhtml', 'http://www.w3.org/1999/xhtml')

                // 遍历每一行
                rows.forEach((row, rowIndex) => {

                    // 获取行内所有单元格
                    const rowCells = row.querySelectorAll('c')

                    // 遍历单元格
                    rowCells.forEach(cell => {

                        // 统计关系数量，生成正确的rel ID
                        let relsAmount = relationships.children.length
                        relsAmount++

                        // 获取单元格内的<is>标签
                        const cellInnerElem = cell.querySelector('is')

                        // 创建关系元素
                        const relElem = `<Relationship Id="rId${relsAmount}" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/hyperlink" Target="https://google.com" TargetMode="External"></Relationship>`

                        // 将关系元素添加到关系文档中
                        relationships.insertAdjacentHTML('beforeend', relElem)

                        // 移除单元格内的<t>标签
                        cellInnerElem.querySelector('t').remove()

                        // 更新单元格，添加带新<t>标签的超链接
                        const link = `<hyperlink r:id="rId${relsAmount}"><t>Click here</t></hyperlink>`
                        cellInnerElem.insertAdjacentHTML('beforeend', link)
                    })
                })
                console.log(relationships)
                console.log(rows[0].querySelector('c'))
            }
        }
    ]
}

let table = $('table').DataTable(options);

HTML代码

<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>

<table id="">
  <thead>
    <tr>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Some data</td>
      <td>Some data</td>
    </tr>
    <tr>
      <td>Some data</td>
      <td>Some data</td>
    </tr>
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者Ludolfyn