网页文档输出、对话框

网页文档输出、对话框

1.1 网页文档输出document.write() , 标签元素输出.innerText .innerHTML .value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
<p>Blanditiis explicabo laboriosam nam nihil quasi!</p>
<p>Deleniti deserunt est et ipsum nam!</p>
<p>Aperiam ea mollitia optio quis tenetur?</p>
<p>Illo ipsum optio quia similique sit.</p>
<label>姓名:</label> <input type="text" id="uname">

<script>
    //将数据直接输入到网页中
    document.write('hello')
    document.writeln("javascript")

    //输出指定的标签元素上(此方法使用最多)  .innerHTML    .innerText
    //代表当前文档的第一个p标签
    let ps = document.getElementsByTagName('p')[0]
    ps.innerHTML = '<strong>文档段落标签</strong>'  //可以显示标签效果
    let p3 = document.getElementsByTagName('p')[2]
    p3.innerText = '<strong>文档段落标签</strong>'  //只能显示文本文字
    let p4 = document.getElementsByTagName('p')[3]
    //'javascript'.fontcolor('red') 其实是字符串<font color="red">javascript</font>
    p4.innerHTML = 'javascript'.fontcolor('red')
    let un = document.getElementById('uname')
    un.value = '请输入姓名'
    un.title = 'aaaaa'

    //控制网页标题
    document.title = Math.PI
</script>
</body>
</html>

image-20220519152712902

1.2 网页对话框输出

artdialog element ui

1.2.1 提示框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>summerlex@126.com</title>
</head>
<body>
<h1>Hello, world!</h1>
<script>
    alert('hello') //提示框
    window.alert('欢迎')
    let s = alert
    s('hello world')
    //s(1 + 2)
</script>
</body>
</html>

1.2.2 确认框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>summerlex@126.com</title>
</head>
<body>
<h1>Hello, world!</h1>
<!--onclick单击事件,鼠标单击才执行-->
<a href="http://www.baidu.com" onclick="return confirm('是否访问百度?')">百度</a>
<p>姓名:李四 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)" id="del">删除</a></p>
<script>
    //确认框
    // let msg = confirm('yes')
    // console.log(msg,typeof (msg))
    let del = document.getElementById('del')
    del.onclick = function () {
        if(confirm('是否删除?')){
            let pp = document.getElementsByTagName('p')[0]
            pp.remove()
        }
    }
</script>

</body>
</html>

1.2.3 输入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>summerlex@126.com</title>
</head>
<body>
<h1>Hello, world!</h1>
<script>
let age = prompt('请输入你的年龄:',18)
if (age>18){
    alert('欢迎访问')
}else{
    alert('no go to baidu')
    //跳转到百度网址
    location.href = 'http://www.baidu.com'
}
</script>

</body>
</html>

1.3初始模板设置

bootstrap

image-20220519154011081

### 如何在浏览器中打印或导出文档 #### 使用HTMLJavaScript实现表格数据的Excel导出功能 为了实现在浏览器中将表格数据导出为Excel文件,可以通过使用`FileSaver.js`库以及`XLSX`库来完成这一操作。以下是具体的代码示例: ```javascript // 假设有一个id为'tableData'的HTML table元素 function exportTableToExcel() { var ws = XLSX.utils.table_to_sheet(document.getElementById('tableData')); var wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); /* 获取二进制字符串作为输出 */ XLSX.writeFile(wb, '表格数据.xlsx'); } ``` 这段脚本会捕获指定ID的表格,并将其转换成Excel工作簿格式,最后触发下载动作[^1]。 #### 调用浏览器内置打印对话框 对于直接调用浏览器的打印功能,则相对简单得多。只需要通过JavaScript执行窗口对象上的print方法即可: ```javascript document.querySelector("#printButton").addEventListener("click", function () { window.print(); // 这将会打开默认的打印预览界面 }); ``` 当用户点击具有`#printButton` ID的选择器所关联的按钮时,就会弹出系统的打印选项卡供用户选择纸张大小、方向等参数并最终确认打印任务。 #### 浏览器内导出PDF文档的方法 如果目标是从浏览器环境中导出当前页面或者部分内容至PDF文件,在现代Web开发中有几种方式可供考虑。一种常见的做法就是利用第三方组件如Wijmo PDF Viewer提供的API接口来进行这项工作;另一种则是借助于浏览器自身的特性——即“打印为PDF”的机制。后者无需额外依赖任何插件或服务端的支持,只需按照常规流程进入打印设置并将目的地设定为“保存为PDF”。 具体来说,可以在网页上添加自定义样式以控制哪些部分应该被包含进最终生成的PDF里头,同时也可以调整布局使得它更适合作为纸质材料阅读。另外值得注意的是,某些情况下可能还需要清理掉一些不必要的UI元素(比如侧边栏广告),这同样能够提高用户体验[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值