javascript - 使用 PHP 将 JSON 转换为 CSS

Question

我的数据库中存储了一些编码的 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)));
});

在我的 Controller 中，我渲染 View ，然后将其转换为 PDF:

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

    $pdf = PDF::loadHTML($view);
    return $pdf->stream();

这意味着呈现的 View 将返回初始状态的 DOM，因此我不能使用任何 JavaScript 来应用 JSON CSS 和 jquery，正因为如此。

那么我可以通过某种方式直接通过 PHP 将这个 JSON 转换为 CSS 吗？

Answer 1

您需要在您的 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();

然后在你的 View 中回显 $css与 <style>...</style>标签。

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