如果我想实现如下的打印预览功能,该如何实现呢?
这里我借助的是 HTML 方法,因为 浏览器 中自带了打印功能:window.print(),有两种方法可以实现:
注:上面第二种方法遇到了一个问题,当弹出新页面打印预览时,原来的 Vuejs 页面发现无法操作。点击任何无反应,关掉打印预览页面后,各种点击事件顺序触发(有点类似于蒙层,虽然点击触发了,但是没法展示,关闭预览页面后才会展示)。
暂时没有遇到解决方法,如果有人知道,欢迎给我指出问题所在。
我用的 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 实现 打印预览 功能了。