将html转换为图像并下载

sg3maiej  于 2022-12-02  发布在  其他
关注(0)|答案(1)|浏览(136)

我想把收到的每一封邮件转换成一张图片,然后用下载按钮下载它。每个帖子都是不同的
这是我的.js代码

// fetch Messages
           function fetchData() {
            $('#displayMessages').html('<div class="alert alert-info">Stiamo recuperando i tuoi messaggi!...</div>');
            $('#messages').click();
             $.ajax({
              url: 'controller/fetch_comments.php',

              //success
               success: function(data){

         if (data=='please login') {
          window.location='./';
          console.log(data);
         }
         else{

          var $fetch ='';
          var component ='';

         
          if (/^[\],:{}\s]*$/.test(data.replace(/\\["\\\/bfnrtu]/g, '@').
replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').
replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
            data=JSON.parse(data);
          console.log(data);

           $.each(data, function(i, fetchAll){
            var fetchData= data[i];
            let message_title = fetchData.message_title ?? ""
  $fetch += '<div class="row m-0"> <div class="pull-left alert col-md-2 mb-0"><img src="assets/img/anon.jpg" style=" width: 50px; height: 50px;  border-radius:50%; box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3); border: 5px solid #2c2c2c;" class="m-0"></div> <div class="alert col-md-7 m-0" style="margin-left:0px; color:#2c2c2c;"> <b>'  +message_title +'</b><br>'  +fetchData.description
         +'</div> <div class="col-md-3 alert pull-right m-0"><span style="color: black;" class="fa fa-clock m-0"></span><br><text style="color: black; font-size:10px;"> ';
         $fetch+=fetchData.date_created+'</text></div></div>';

        });

          } else {

            $fetch +='<div class="alert alert-danger">Ancora nessun messaggio 😒</div>';
          console.log(fetch);
          $('#displayMessages').html($fetch)
         }

        $('#displayMessages').html($fetch);
             }

           }

           });

}

这是php代码

$usersObj = new Comments();

$logsObj = new Logs();


    $id = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : 1;

    if (empty($id)) {

        exit();

    }


    if ($allComments = $usersObj ->FETCH_COMMENTS($id)) {

        $logDescription = 'data fetched!';

        $logsObj->INSERT_LOG($id, $logDescription);


    }else{

        echo 'log failed';


    }

   echo isset($allComments) ? json_encode($allComments) : 'nothing found';

这是我的 Jmeter 板中的html,用于显示消息

<div class="tab-pane active" id="home" role="tabpanel">


                      <div id="displayMessages">
                      </div>

                       

                    </div>

我不明白我在哪里必须采取行动,谢谢帮助随时编辑代码

mklgxw1f

mklgxw1f1#

你可以用javascript的oneliner来完成这个任务。
只需使用html2canvas库。
例如:
HTML格式:

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

js:

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

把图片放入一个带有“下载”属性的标签中。
我希望我能帮你。

相关问题