时间戳

首页 > 解决方案 > 如何打印多个订单的运输标签

javascript - 如何打印多个订单的运输标签

问题描述

在加载html页面时将html内容转换为图像格式，但是从控制器调用时无法将html内容转换为图像。（对于转换我们使用的是HTML2CANVAS）

这适用于 Linux 服务器、PHP 7.2 和 Codeigniter 3.1.5

我们找到了使用以下函数加载 html 页面的解决方案：在 Javascript

$.each(data, function(key,value) {   //for select multiple datas
        var html = escape(value.design);     
        var orderid = value.orderid;
        var label_height = value.label_height;
        var label_width = value.label_width;
        $(".temp_div").load("<?php echo base_url();?>orders/downloadcavas?design="+html+"&orderid="+orderid+"&label_width="+label_width+"&label_height="+label_height);
    });

在 Codeigniter 中

function downloadcavas()
{  
$data1['design'] = $design = urldecode($_GET["design"]);
$data1['orderid'] = $orderid = $_GET["orderid"];
$data1['label_width'] = $label_width =  $_GET["label_width"];
$data1['label_height'] = $label_height =  $_GET["label_height"]; 
if(isset($label_height))
{
if(isset($label_width))
{
$style = "height:".$label_height."in;width:".$label_width."in;";
}
else
{
$style = "height:".$label_height."in;";
}
}
else
{
$style = "";
} 
echo '<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><link rel="stylesheet" href="'.base_url().'js/jquery-ui.css"><link href="'.base_url().'js/lable_design.css" rel="stylesheet" /> 
<style>
.canvas-section { 
background-color: #fff; 
}
</style>
</head>
<body> 
<div id="divCanvas" class="canvas-section divCanvas" style="'.$style.'margin-top:-70px;"  >'.$design.' </div> 
<script type="text/javascript" >$("#preloader").hide(); 
$.getScript("'.base_url().'js/html2canvas.js"); 
setTimeout(function(){
preview1();
},1000); 
function preview1()
{        
var element = $(".divCanvas");  
var orderid = "'.$orderid.'"; 
var scaleBy = 5;
var w = 1000;    
var h = 1000;
var div = document.querySelector(".divCanvas"); 
var canvas = document.createElement("canvas");
canvas.width = w * scaleBy;
canvas.height = h * scaleBy;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
var context = canvas.getContext("2d");
context.scale(scaleBy, scaleBy);  
html2canvas(div, {
useCORS: true, 
canvas:canvas, 
onrendered: function (canvas) { 
theCanvas = canvas;
var image = theCanvas.toDataURL("image/jpg"); 
$.ajax({
url: "'.base_url().'template_builder/template/orderimagesave", 
data:"canvas="+image+"&orderid="+orderid,
type: "POST",  
cache: false,
global: false,
success: function(data){ }});
}
}); 
} </script> 
</body>
</html>'; 
}

但是我们不能将图像转换为连续的 html 内容。您能否建议任何其他将 html 内容转换为图像而不加载 html 页面的方法。提前致谢

标签： javascriptphpajaxcodeigniter

解决方案

推荐阅读