使用 Datatables.js 时用于向 .XLSX 文档单元格添加超链接的 OpenXML 语法

问题描述 投票:0回答:0

我已经尝试了所有我能想到并找到的方法,但没有任何效果。即使是 ChatGPT 的答案也不起作用。

我正在使用 Datatables.js 并且我正在自定义

excel
导出按钮功能,以便我可以创建一个超链接,其中单元格中的文本是一个 URL。

所以我:

  • 我找到了我需要的手机
  • 创建一个
    <Relationship>
    标签并添加必要的属性指向cell
  • <Relationship>
    标签注入
    <Relationships>
    文档

然后我:

  • 创建一个
    <hyperlink>
    元素
  • 添加必要的属性指向
    <Relationship>
    标签
  • <hyperlink>
    标签附加到单元格的
    <c>
    标签

最后,单元格的语法如下所示:

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

关系语法如下所示:

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

代码:

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) {

                // Get the sheet data for the first sheet in the .xlsx file
                const sheet = xlsx.xl.worksheets['sheet1.xml']
                const relationships = xlsx.xl._rels['workbook.xml.rels'].querySelector('Relationships')
                const rows = sheet.querySelectorAll('row')

                // Adding an attribute to the worksheetElem element
                const worksheetElem = sheet.querySelector('worksheet')
                worksheetElem.setAttribute('xmlns:xhtml', 'http://www.w3.org/1999/xhtml')

                // Loop through each row
                rows.forEach((row, rowIndex) => {

                    // Get all cells in the row
                    const rowCells = row.querySelectorAll('c')

                    // Loop through cells
                    rowCells.forEach(cell => {

                        // Counting the relationships to give the correct number to the rel ID
                        let relsAmount = relationships.children.length
                        relsAmount++

                        // Get the <is> tag inside the cell
                        const cellInnerElem = cell.querySelector('is')

                        // Create the relationship element
                        const relElem = `<Relationship Id="rId${relsAmount}" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/hyperlink" Target="https://google.com" TargetMode="External"></Relationship>`

                        // Add the relationship element into the relationships doc
                        relationships.insertAdjacentHTML('beforeend', relElem)

                        // Remove the <t> tag from the cell
                        cellInnerElem.querySelector('t').remove()

                        // Update the cell to include the hyperlink with a new <t> tag
                        const link = `<hyperlink r:id="rId${relsAmount}"><t>Click here</t></hyperlink>`
                        cellInnerElem.insertAdjacentHTML('beforeend', link)
                    })
                })
            }
        }
    ]
}

let table = $('table').DataTable(options);
<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>

任何帮助将不胜感激。

javascript excel datatables openxml xlsx
© www.soinside.com 2019 - 2024. All rights reserved.