Yii/Vuejs 如何实现 PDF 打印预览功能
2018-05-22| 程成| 2301| 1| Yii

如果我想实现如下的打印预览功能,该如何实现呢?


image.png



一、如何在 Vuejs 中实现打印功能


这里我借助的是 HTML 方法,因为 浏览器 中自带了打印功能:window.print(),有两种方法可以实现:


1、Vuejs 页面中调用 window.print() 方法;

2、Vuejs 通过 a 标签跳转到 HTML 页面,在 HTML 调用 window.print()方法


注:上面第二种方法遇到了一个问题,当弹出新页面打印预览时,原来的 Vuejs 页面发现无法操作。点击任何无反应,关掉打印预览页面后,各种点击事件顺序触发(有点类似于蒙层,虽然点击触发了,但是没法展示,关闭预览页面后才会展示)。

暂时没有遇到解决方法,如果有人知道,欢迎给我指出问题所在。



二、如何在 PHP 中如何实现打印功能


我用的 Yii,在 composer.json 中添加包,大致原理是将 HTML 转化成 PDF 格式


"kartik-v/yii2-mpdf": "*"



然后在 CMD 中运行 composer require kartik-v/yii2-mpdf 


安装完毕后便可调用,下面是一段完整的代码例子:



public function actionIndex(){
        Yii::$app->response->format = Response::FORMAT_HTML;
        $inventory_no = Yii::$app->request->get('inventory_no');
        $result = $this->getInventories($inventory_no);
        $result =  $this->render('index',[
            'wrong_message' => $result['message'],
            'data' => $result['data'],
        ]);
        $content = $this->renderPartial('xsckd',['result'=>$result]);
        $pdf = new Pdf([
            // set to use core fonts only
            'mode' => Pdf::MODE_UTF8,
            // A4 paper format
            'format' => Pdf::FORMAT_A4,
            // portrait orientation
            'orientation' => Pdf::ORIENT_LANDSCAPE,
            // stream to browser inline
            'destination' => Pdf::DEST_BROWSER,
            // your html content input
            'content' => $content,
            // format content from your own css file if needed or use the
            // enhanced bootstrap css built by Krajee for mPDF formatting
            'cssFile' => '@vendor/kartik-v/yii2-mpdf/assets/kv-mpdf-bootstrap.min.css',
            // any css to be embedded if required
            'cssInline' => '.kv-heading-1{font-size:24px}',
            // set mPDF properties on the fly
            'options' => [
                'title' => '中文',
                'autoLangToFont' => true,    //这几个配置加上可以显示中文
                'autoScriptToLang' => true,  //这几个配置加上可以显示中文
                'autoVietnamese' => true,    //这几个配置加上可以显示中文
                'autoArabic' => true,        //这几个配置加上可以显示中文
            ],
            // call mPDF methods on the fly
            'methods' => [
                'SetHeader' => ['中文'],
                'SetFooter' => ['{PAGENO}'],
            ]
        ]);
        // return the pdf output as per the destination setting
        return $pdf->render();
    }


关于 composer 何时使用 install, update 还是 require?


简单解释

composer install - 如有 composer.lock 文件,直接安装,否则从 composer.json 安装最新扩展包和依赖;

composer update - 从 composer.json 安装最新扩展包和依赖;

composer update vendor/package - 从 composer.json 或者对应包的配置,并更新到最新;

composer require new/package - 添加安装 new/package, 可以指定版本,如: composer require new/package ~2.5.



通过以上方法,你可以用 Vuejs 或者 PHP 实现 打印预览 功能了。




×
作者:程成
QQ:492245711