搜索

首页 >web前端 >js教程 >uniapp 入门实战 将前端页面导出成pdf

uniapp 入门实战 将前端页面导出成pdf

Patricia Arquette
Patricia Arquette原创
2024-11-09 02:42:01751浏览

背景

产品要求公司的小程序和网站需要将商品详情导出成pdf，所以今天有琢磨一下如何将前端页面导出成pdf

实现效果

uniapp 入门实战 将前端页面导出成pdf

Web网站

提醒：以下代码图片地址，请自行修改一下。

  • demo： 整体来说很简单，就是借助html2canvas将dom转成图片，然后jsPDF添加图片，然后保存即可 
  <!DOCTYPE html>
  <html lang="en">

  <head>
   <meta charset="UTF-8" />
   <title>title</title>
   <style>
    .btn {
     width: 300px;
     height: 100px;
    }

    img {
     width: 100%;
     object-fit: cover;
    }
   </style>
   <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
   <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  </head>

  <body>
   <button type="button"
      >



<h2>
  
  
  微信小程序
</h2>

<blockquote>
<p>说明：公司小程序项目是用的uniapp开发的</p>
</blockquote>

<h3>
  
  
  方法1：通过wx.miniProgram.postMessage将pdf数据传给小程序
</h3>

<blockquote>
<p>提醒：以下代码图片地址，请自行修改一下。</p>
</blockquote>
  • h5 webview页面 
  <!DOCTYPE html>
  <html lang="en">

  <head>
   <meta charset="UTF-8" />
   <title>title</title>
   <style>
    .btn {
     width: 300px;
     height: 100px;
    }

    img {
     width: 100%;
     object-fit: cover;
    }
   </style>
   <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
   <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  </head>

  <body>
   <button type="button"
      >



<ul>
<li>uniapp 页面代码</li>
</ul>

<blockquote>
<p>特别提醒：请将页面部署至自己的服务器下，然后修改一下地址，然后在小程序后台把部署的域名配置到web合法域名列表下，不然webview无法加载页面<br>
</p>
</blockquote>

<pre class="brush:php;toolbar:false">  <template>
   <PageLayout>
    <web-view src="https://xxx.com/pdf_test.html"
         @message="handleGetMessage"></web-view>
   </PageLayout>
  </template>

  <script>
  export default {
   data() {
    return {
     imageData: "",
    }
   },
   methods: {
    handleGetMessage(e) {
     console.log("收到webview消息:", e)
     this.imageData = e.detail.data[0].imageData
     console.log("收到webview消息: imageData=", this.imageData);
     const base64 = this.imageData.split("base64,")[1]
     console.log("收到webview消息: path=", base64);
     this.download(base64)
    },
    async download(base64) {
     base64 = base64.replace(/[\r\n]/g, "");
     const fs = wx.getFileSystemManager();
     const buffer = wx.base64ToArrayBuffer(base64);
     const filePath = wx.env.USER_DATA_PATH + "/" + Date.now() + ".pdf"
     fs.writeFile({
      filePath,
      data: buffer,
      success(res) {
       uni.openDocument({
        showMenu: true,
        fileType: "pdf",
        filePath,
        success: function (res) {
         console.log("打开文档成功")
        }
       })
      },
      fail(err) {
       console.log("错误", err)
      }
     })
    },
   },
   onLoad(e) {

   }
  }

  </script>

  <style scoped></style>

方法2：通过后端中转数据，然后通过导航传参（最后的备用方案）

补充说明：如果你碰到h5通过wx.miniProgram.postMessage发送消息，小程序死活的搜索不到消息，返回、分享都没用。解决办法：可以通过将数据保存至后端，然后再通过导航将参数传给小程序，然后再下载pdf。具体代码就罗列了，简单说下思路

  1. 将h5导出的pdf传给后端，然后返回一个id
  2. 通过wx.miniProgram.navigateTo({url: ‘/pages/xx/xx?id=234’})
  3. 然后xx页面加载的onLoad回调中从option拿到参数后，反查后端拿pdf

总结

  • 部署webview页面时，需要小程序后台配置合法域名，否则部分正常加载webview的页面
  • web页面中用到的图片，相应的域名也要在小程序后台进行配置，配置到request合法域名列表中，不然图片可能加载不出来
  • 小程序2个坑位，千万要注意，别掉坑里了。
    1. uniapp webview 监听postmessage的函数是message，微信小程序里面监听的方法是bindmessage（注意：千万别搞错了）
    2. postMessage发送后不是立即响应的，而是只在特点时机触发的 （后退、组件销毁、分享触发并收到消息）

参考文献

  • uniapp实现将页面转换成pdf（小程序、app、h5）
  • web-view
  • 关于h5跳转到小程序的坑
  • https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

以上是uniapp 入门实战 将前端页面导出成pdf的详细内容。更多信息请关注PHP中文网其他相关文章！

html JS dom webview 微信小程序 https
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：How to Ensure Event Execution Order in jQuery?下一篇：Why Does the Dollar Sign ($) Exist in JavaScript?

相关文章

查看更多