Javascript 如何使用React.js在Safari上的隐藏元素上触发.click（）？

我在React.js中有一个按钮，单击该按钮可以将数据发送到服务器以转换为CSV文件。当我得到响应时，我希望能够让用户下载CSV文件。它适用于Firefox和Chrome，但不适用于Safari。有什么想法吗？我知道。上不支持单击（）

这是我的密码：

import React from 'react';
import { graphql } from 'react-apollo';

import ExportDataQL from 'ExportDataQL'
import Icon from 'Icon';

const handleExport = (data, type, exportToCSV) => {
  const variables = { 
    data: JSON.stringify(data),
    type
  }

  exportToCSV({ variables })
  .then( response => {
    const { fileName, fileUri } = response.data.exportToCSV

    var hiddenElement = document.createElement('a');
    hiddenElement.href = fileUri;
    hiddenElement.target = '_blank';
    hiddenElement.download = fileName;
    document.body.appendChild(hiddenElement);
    console.log('clicking')
    // hiddenElement.click();
    hiddenElement.dispatchEvent(new MouseEvent(`click`, {bubbles: true, cancelable: true, view: window}))
    hiddenElement.remove()
  })
  .catch( e => console.log('ERROR getting download URL:', e) )
}

const ExportToCSV = ({ data, dataType, buttonText, exportToCSV }) => {
  if (data === undefined || data.length===0) return <span></span>

  return <button
          type='button'
          className="btn btn-link hover_cursor font-weight-bold"
          onClick={() => handleExport(data, dataType, exportToCSV)}>
          <Icon IconClassName="fill-primary" icon='excel-file'/><span className="ml-2">
          {buttonText ? buttonText : "Export data"}</span>
        </button>
}


export default graphql(ExportDataQL.exportToCSV, {name: "exportToCSV"})(ExportToCSV);

从“React”导入React；
从'react apollo'导入{graphql}；
从“ExportDataQL”导入ExportDataQL
从“图标”导入图标；
const handleExport=（数据、类型、exportToCSV）=>{
常量变量={
数据：JSON.stringify（数据），
类型
}
exportToCSV（{variables}）
。然后（响应=>{
const{fileName，fileUri}=response.data.exportToCSV
var hiddenElement=document.createElement（'a'）；
hiddenElement.href=fileUri；
hiddenElement.target='_blank'；
hiddenElement.download=文件名；
document.body.appendChild（hiddenElement）；
console.log（'单击'）
//hiddenElement.click（）；
dispatchEvent（新的MouseEvent（`click`，{bubbles:true，cancelable:true，view:window}））
hiddenElement.remove（）
})
.catch（e=>console.log（'获取下载URL时出错：'，e））
}
const ExportToCSV=（{data，dataType，buttonText，ExportToCSV}）=>{
if（data==undefined | | data.length==0）返回
return handleExport（数据、数据类型、exportToCSV）}>
{buttonText？buttonText:“导出数据”}
}
导出默认图形ql（ExportDataQL.exportToCSV，{name:“exportToCSV”}）（exportToCSV）；

获取响应后，下载是否应该是强制性的？我真的不明白为什么你想要一个隐藏的元素，你可以“点击”下载一个文件到客户端。似乎是一个不必要的黑客：）你已经尝试了CSS光标：“指针”修复了吗？这样，safari应该将其视为可单击的对象。@MstrQKN该按钮调用API来处理数据并返回CSV。我希望用户只需单击一次。我怎么能有一个按钮来调用API，然后自动下载CSV？这有意义吗？也许有更好的方法。