预览打印 pdf

最新推荐文章于 2021-06-03 16:01:38 发布

年年CODE

最新推荐文章于 2021-06-03 16:01:38 发布

阅读量147

点赞数

分类专栏：移动端

本文链接：https://blog.csdn.net/qq_38743783/article/details/108382649

版权

移动端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html>
<head></head>
<body>

		## A4纸宽度 180mm
	<div style="width:180mm">
        <table border="1" cellspacing="0" cellpadding="15" style="width:100%">
          <caption>
            <div style="font-size:20px;color:#333333;font-weight: bold;padding-top:10px">演播室预约申请表</div>
            <div
              style="font-size:14px;color:#828282;padding:15px;text-align:right"
            >申请时间：2020-07-27 11：22</div>
          </caption>
          <tr style="text-align:center;height:40px">
            <td style="width:140px;font-weight:bold;">申请部门</td>
            <td colspan="3">信息网络中心</td>
          </tr>
          <tr style="text-align:center">
            <td style="width:140px;font-weight:bold;">申请人</td>
            <td>陈婉</td>
            <td style="width:140px;font-weight:bold;">联系电话</td>
            <td>18203753395</td>
          </tr>
          <tr style="text-align:center;">
            <td style="width:140px;font-weight:bold;">活动名称及内容</td>
            <td colspan="3" style="text-align:left">
              <div style="line-height:20px">
                因为场地及设备需要准备时间，申请需至少提前 1 天流转到管理员处，否则不予受理。
                演播厅内只可开展教学有关及学生素质教育活动
              </div>
            </td>
          </tr>
          <tr style="text-align:center">
            <td style="width:140px;font-weight:bold;">使用时间</td>
            <td colspan="3" style="text-align:left">
              <span>2019-05-27 14:20</span>
            </td>
          </tr>

          <tr style="text-align:center">
            <td rowspan="3" style="width:140px;font-weight:bold;">使用场地及设置情况</td>
            <td colspan="3" style="text-align:left">
              <div style="line-height:20px">
                因为场地及设备需要准备时间，申请需至少提前 1 天流转到管理员处，否则不予受理。
                演播厅内只可开展教学有关及学生素质教育活动，严禁进行非法活动及任何盈利性的活动。 凡讲
              </div>
            </td>
          </tr>
          <tr style="text-align:center">
            <td style="text-align:left">
              <span>请选择使用场地</span>
            </td>
            <td colspan="3">
              <span>综合演播室</span>
            </td>
          </tr>
          <tr style="text-align:center">
            <td style="text-align:left">
              <span>是否使用多媒体设备</span>
            </td>
            <td colspan="3">
              <span>是</span>
            </td>
          </tr>

          <tr style="text-align:center;">
            <td style="width:140px;font-weight:bold;">申请部门审批意见</td>
            <td colspan="3">
              <div style="text-align:left;padding-bottom:10px">请信息中心配合谢谢</div>
              <div style="width:130px;text-align:center;float:right">
                <img src="@/assets/img/user.png" alt>
                <div style="height:100%">2019-05-23 09:53</div>
              </div>
            </td>
          </tr>
          <tr style="text-align:center">
            <td style="width:140px;font-weight:bold;">信息网络中心审批意见</td>
            <td colspan="3">
              <div style="text-align:left;padding-bottom:10px">请信息中心配合谢谢</div>
              <div style="width:230px;float:right">
                <img style="width:180px;height:61px" src="1.jpg" alt>
                <div style="height:100%">2019-05-23 09:53</div>
              </div>
            </td>
          </tr>
        </table>
        <div
          style="text-align:left;color: #4F4F4F;margin-top:15px;font-size:14px;padding-left:25px"
        >【注意事项】</div>
        <ul style="text-align:left;color: #828282; font-size:14px;line-height: 28px;margin-top:0px;">
          <li>因为场地及设备需要准备时间，申请需至少提前 1 天流转到管理员处</li>
          <li>因为场地及设备需要准备时间，申请需至少提前 1 天流转到管理员处</li>
          <li>因为场地及设备需要准备时间，申请需至少提前 1 天流转到管理员处</li>
          <li>因为场地及设备需要准备时间，申请需至少提前 1 天流转到管理员处</li>
        </ul>
      </div>
</body>
</html>

在这里插入图片描述
然后再git上下载pdf.js 把文件放在pubilc/static下面 http://mozilla.github.io/pdf.js/
https://github.com/goSunadeod/vue-pdf.js-demo
点击某条数据的时候触发事件把id传过去

在这里插入图片描述

// 申请表
    getApplyData(val) {
      const h = this.$createElement
      this.$msgbox({
        title: '提示',
        message: h('p', null, [
          h('span', null, '此操作将预览当前报表单，是否继续?')
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            console.log(val.id)
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '加载中...'
            this.id = val.id
            const hostUrl = 'http://*******'
            const pdfurl =
              // window.location.href.split('apply')[0] +
              `http://192.168.31.35:9528/static/pdf/web/viewer.html?file=${encodeURIComponent(
                `${hostUrl}/***/**/print/${val.id}`
              )}`
              //encodeURIComponent里面是接口地址。上面的html可以给后端使用
            instance.confirmButtonLoading = false
            done()
            window.open(pdfurl)
          } else {
            instance.confirmButtonLoading = false
            done()
          }
        }
      })
    },

百度云：https://pan.baidu.com/s/1bHgkX0vLbA9rdvOh5YX_LQ 提取码：hu8r

年年CODE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
预览打印 pdf

<html><head></head><body> ## A4纸宽度 180mm <div style="width:180mm"> <table border="1" cellspacing="0" cellpadding="15" style="width:100%"> <caption> <div style="font-size:20px;
复制链接

扫一扫