使用PHP将JSON转换为CSS


Convert JSON to CSS with PHP

我有一些编码JSON数据存储在我的数据库中,如下所示:

{".main-header":"{'"color'":'"rgb(5, 213, 255)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"NeutraText-Book'",'"font-size'":'"35px'"}",".main-header-free":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"NeutraText-Book'",'"font-size'":'"22px'"}",".sub-header-lunch-price":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"NeutraText-Book'",'"font-size'":'"22px'"}",".sub-header-week":"{'"color'":'"rgb(62, 214, 24)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"NeutraText-Book'",'"font-size'":'"22px'"}",".sub-header-week-week":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"NeutraText-Book'",'"font-size'":'"22px'"}",".day-name":"{'"color'":'"rgb(237, 129, 5)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"NeutraText-Book'",'"font-size'":'"22px'"}",".lunchtext":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"Baskerville'",'"font-size'":'"13px'"}",".puffheading":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"NeutraText-Book'",'"font-size'":'"22px'"}",".pufftext":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"Baskerville'",'"font-size'":'"13px'"}",".re_name":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"'Times New Roman''",'"font-size'":'"13px'"}",".re_address":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"'Times New Roman''",'"font-size'":'"13px'"}",".re_phone":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"'Times New Roman''",'"font-size'":'"13px'"}",".re_webpage":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"'Times New Roman''",'"font-size'":'"13px'"}","html":"{'"background'":'"none'"}"}

这是我将如何使用jquery:

var currentStyle = {{ $theme->css}};
$.each(currentStyle, function( index, value ) {
   $(index.toString()).css(jQuery.parseJSON(value)));
});

在我的控制器中,我渲染视图,然后将其转换为PDF:

    $view = View::make('pdf.template')
                ->with('css', $css);
    $pdf = PDF::loadHTML($view);
    return $pdf->stream();

这意味着所呈现的视图将返回其初始状态的DOM,因此我不能使用任何JavaScript来应用JSON CSS(例如jquery)。

那么我可以通过PHP直接将JSON转换为CSS吗?

您需要在php脚本中生成有效的css:

$str = '{".main-header":"{'"color'":'"rgb(5, 213, 255)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"NeutraText-Book'",'"font-size'":'"35px'"}",".main-header-free":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"NeutraText-Book'",'"font-size'":'"22px'"}",".sub-header-lunch-price":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"NeutraText-Book'",'"font-size'":'"22px'"}",".sub-header-week":"{'"color'":'"rgb(62, 214, 24)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"NeutraText-Book'",'"font-size'":'"22px'"}",".sub-header-week-week":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"NeutraText-Book'",'"font-size'":'"22px'"}",".day-name":"{'"color'":'"rgb(237, 129, 5)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"NeutraText-Book'",'"font-size'":'"22px'"}",".lunchtext":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"Baskerville'",'"font-size'":'"13px'"}",".puffheading":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"NeutraText-Book'",'"font-size'":'"22px'"}",".pufftext":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"Baskerville'",'"font-size'":'"13px'"}",".re_name":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"''Times New Roman'''",'"font-size'":'"13px'"}",".re_address":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"''Times New Roman'''",'"font-size'":'"13px'"}",".re_phone":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"''Times New Roman'''",'"font-size'":'"13px'"}",".re_webpage":"{'"color'":'"rgb(0, 0, 0)'",'"background-color'":'"rgba(0, 0, 0, 0)'",'"font-family'":'"''Times New Roman'''",'"font-size'":'"13px'"}","html":"{'"background'":'"none'"}"}';
$arr = json_decode($str, true);
$css='';
foreach($arr as $key => $val){
    $css.=$key . '{' . PHP_EOL;
    foreach(json_decode($val, true) as $k => $v){
        $css.=$k . ':' . $v . ';' . PHP_EOL;
    }
    $css.= '}' . PHP_EOL;
}
//to see result
//echo '<pre>' . $css . '</pre>';
$view = View::make('pdf.template')
            ->with('css', $css);
$pdf = PDF::loadHTML($view);
return $pdf->stream();

然后在您的视图中echo $css<style>...</style>标签。

请注意,新行(PHP_EOL)仅用于格式化,不需要。