HarmonyOS Next开发学习手册——处理网页内容

最新推荐文章于 2024-11-15 15:44:25 发布

OpenHarmony_小贾

最新推荐文章于 2024-11-15 15:44:25 发布

阅读量1.1k

点赞数 14

分类专栏： HarmonyOS 鸿蒙开发移动开发文章标签： harmonyos 学习华为鸿蒙开发前端 web组件移动开发

本文链接：https://blog.youkuaiyun.com/maniuT/article/details/140620371

版权

使用Web组件打印前端页面

Web组件打印html页面时可通过W3C标准协议接口和应用接口两种方式实现。开发者在使用该能力时，需配置 ohos.permission.PRINT 打印权限。

使用W3C标准协议接口拉起打印

通过创建打印适配器，拉起打印应用，并对当前Web页面内容进行渲染，渲染后生成的PDF文件信息通过fd传递给打印框架。W3C标准协议接口window.print()方法用于打印当前页面或弹出打印对话框。该方法没有任何参数，只需要在JavaScript中调用即可。

可通过前端css样式控制是否打印，例如@media print。再通过web加载该html页面的方式运行。

print.html页面代码。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>printTest</title>
    <style>
        @media print {
            h1 {
                display: none;
            }
        }
    </style>
</head>

<body>
    <div>
        <h1><b>
                <center>This is a test page for printing</center>
            </b>
            <hr color=#00cc00 width=95%>
        </h1>
        <button class="Button Button--outline" onclick="window.print();">Print</button>
        <p> content content content </p>
        <div id="printableTable">
            <table>
                <thead>
                    <tr>
                        <td>Thing</td>
                        <td>Chairs</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>blue</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>green</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <p> content content content </p>
        <p> content content content </p>
    </div>
</body>

应用侧代码。

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.Webview

最低0.47元/天解锁文章