如何导出highcharts图表并通过电子邮件发送？

m1m5dgzv 于 2022-11-10 发布在 Highcharts

关注(0)|答案(1)|浏览(319)

我在我的项目中使用highcharts，我有点新。我的问题是，* 如何获取我的图表的捕获，然后通过电子邮件发送它？* 对于电子邮件发送我使用PHPMailer，电子邮件工作正常。我在highcharts文档中搜索，他们建议节点导出服务器，但没有示例。我从互联网上得到了一些提示，但不工作。我想，当我点击通过电子邮件发送图表按钮，它应该采取图表的图片，并将其发送到电子邮件.所以，谁能好心地帮助我请与一个例子？一个简单的例子我的代码如下：

// import highcharts and export server
<script src="https://code.highcharts.com/highcharts.js"></script>
   <script src="https://code.highcharts.com/modules/exporting.js"></script>
// sendGraphByMail is my PHPMailer configuration file
  <a href="sendGraphByMail.php">
      <button class="send-chart" onclick="sendChart()">Send chart by e-mail</button>
   </a>
   <div id="container"></div>
   <h2>
      Exported image below
   </h2>
   <img id="image" />
   <script>
      var options = {
         chart: {},
         xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
               'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
            ]
         },
         series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            type: 'column'
         }]
      }
      var chart = Highcharts.chart('container', options);
      function sendChart() {
         console.log('Send chart button clicked !');
         // I think the exprot script goes here 
      }

页面屏幕截图如下所示。

highcharts

来源：https://stackoverflow.com/questions/73048428/how-to-export-highcharts-graph-and-send-it-by-email

1条答案

按热度按时间

nbnkbykc1#

我想回答我自己：

我们使用html2canvas来进行屏幕截图。
我们使用SMTPJS发送电子邮件。

对于电子邮件发送，我们使用弹性电子邮件提供商，因为SMTP只接受弹性电子邮件提供商.注意：不要强制同时导入smtpJS和html2canvas

<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"></script>
  <script src="https://smtpjs.com/v3/smtp.js"></script>

function sendChart() {
          // get the div id where you dispaly the highchart
         let chart = document.getElementById('yourChartId');
         // Use the html2canvas function to take a screenshot
         html2canvas(chart).then(
            function(canvas) {
               canvas.style.display = 'none'
               document.body.appendChild(canvas);
               Email.send({
                     //SecureToken: 'your security(-4d2c-86ac-41f939394144)',
                     Host: "smtp.elasticemail.com",
                     Username: "yourEmail@domain.com",
                     Password: "yourPassword",
                     To: 'reciever@gmail.com',
                     // To: document.getElementById('idname').value, // if you want to get by form
                     From: "yourEmail@domain.com",
                     Subject: "Highchart graph",
                     Body: "Hello, the body of your email",
                     Attachments: [{
                        name: "chart.png",
                        data: canvas.toDataURL()
                     }]
                  })
                  .then(
                     message => alert(message == 'OK' ? 'Email sent successfully' : message)
                  );
            })
      }

展开查看全部

赞(0）回复(0）举报 2022-11-10

我来回答

如何导出highcharts图表并通过电子邮件发送？

1条答案

相关问题

热门标签

最新问答