当前位置:首页 » 《资源分享》 » 正文

微信小程序使用webview页面转pdf

8 人参与  2024年09月12日 14:01  分类 : 《资源分享》  评论

点击全文阅读


前言:正式上线,在小程序后台配置业务域名
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

一、uniapp 使用 webview

<template><web-view :src="url" @message="message"></web-view></template><script>export default {data() {return {url: ''}},onLoad(option) {this.url = `http://www.xxx.com?orderId=${option.orderId}`;},methods: {message(e) {this.imageData = e.detail.data[0].imageDatalet path = this.imageData.split('base64,')[1]this.download(path)},async download(url) {let result = url.replace(/[\r\n]/g, '');var fs = wx.getFileSystemManager();let fileName = '';var times = new Date().getTime();url = wx.base64ToArrayBuffer(result);// console.log(url,'图片临时路径')const filePath = wx.env.USER_DATA_PATH + '/' + Date.now() + '.pdf'fs.writeFile({filePath,data: url, // 将 base64 转为 arrayuffersuccess(res) {uni.openDocument({showMenu: true,fileType: 'pdf',filePath,success: function(res) {console.log('打开文档成功')}})},fail(err) {console.log('错误', err)}})}}}</script>

二、H5页面
(1) 安装两个插件

npm i jspdf html2canvas 
<template><view id="content">这是转pdf的内容</view></template><script>import html2Canvas from 'html2canvas';import { jsPDF } from 'jspdf';export default {data() {return {orderId: ''}},onLoad(option) {this.orderId = this.getUrlParameter('orderId');uni.showLoading({title: '正在加载'})setTimeout(() => {uni.hideLoading();this.getPdf()}, 2000)},methods:{//接收uniapp传来的链接参数getUrlParameter(name) {name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),results = regex.exec(location.search);return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));},getPdf() {let that = thisvar shareContent = document.getElementById('content');var width = shareContent.offsetWidth / 1;var height = shareContent.offsetHeight / 1;html2Canvas(shareContent, {dpi: 900,scrolly: 0,// width:eleW,//生成后的宽度// height:eleH,//生成后的高度scrollx: -10,useCORS: true, //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。// backgroundColor: null //避免图片有白色边框}).then((canvas) => {var context = canvas.getContext('2d');context.mozImageSmoothingEnabled = false;context.webkitImageSmoothingEnabled = false;context.msImageSmoothingEnabled = false;context.imageSmoothingEnabled = false;var pageData = canvas.toDataURL('image/jpeg', 1.0);var img = new Image();img.src = pageData;img.onload = () => {// 获取dom高度、宽度img.width = img.width / 2;img.height = img.height / 2;img.style.transform = 'scale(0.5)';if (width > height) {// 此可以根据打印的大小进行自动调节// eslint-disable-next-linevar pdf = new jsPDF('l', 'mm', [width * 0.545, height * 0.545]);} else {// eslint-disable-next-linevar pdf = new jsPDF('p', 'mm', [width * 0.545, height * 0.545]);}pdf.addImage(pageData, 'jpeg', 0, 0, width * 0.545, height * 0.545);pdf.save('这是文件命名' + '.pdf'); //h5在这就可以保存pdf//内嵌到微信小程序var blob = pdf.output("datauristring");console.log(wx, 'wx')wx.miniProgram.getEnv(function(res) {console.log("当前环境:" + JSON.stringify(res));});wx.miniProgram.postMessage({data: {imageData: blob},});wx.miniProgram.navigateBack()};}).catch((r) => {console.log(r);})}}}</script>

(2) 在App.vue 添加以下代码

onLaunch() {console.log('App Launch')// #ifdef H5var script = document.createElement('script');script.src = "https://res.wx.qq.com/open/js/jweixin-1.4.0.js";script.type = 'text/javascript';document.body.appendChild(script);// #endif},

点击全文阅读


本文链接:http://zhangshiyu.com/post/158788.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • [完结]沈淮安陆心玥(又名:暗恋青梅十年我选择放手)新上全
  • 暴雨惊魂夜:+后续(陆舟吴佳)全书免费_(陆舟吴佳)暴雨惊魂夜:+后续后续(陆舟吴佳)
  • 我死遁后,族长悔疯了:结局+番外(我死遁后,族长悔疯了:结局+番外)_我死遁后,族长悔疯了:结局+番外(战痕音音)列表_笔趣阁(战痕音音)
  • 温长生陆扶摇(温长生陆扶摇:结局+番外)完结_温长生陆扶摇列表_笔趣阁(温长生陆扶摇:结局+番外)
  • 梁岁霍司年叶琳完本(又名:似月光吻野风)完本_完本梁岁霍司年叶琳完本(又名:似月光吻野风)
  • 全书免费周宴礼宋知蔓(又名:改嫁闲散王爷后负心将军跪求我原谅)_周宴礼宋知蔓(又名:改嫁闲散王爷后负心将军跪求我原谅)全书免费
  • 天鹅曾坠落(江舒白秦蓁)_天鹅曾坠落(江舒白秦蓁)
  • [爱的莫比乌斯环]精彩节选免费试读_江子安娇娇老公节选免费试读
  • 温长生陆扶摇:结局+完结宝藏_温长生陆扶摇:结局+完结宝藏
  • 好看的温长生陆扶摇:结局+完结宝藏_温长生陆扶摇:结局+完结宝藏
  • 全书免费娘子为师弟夺我秘宝后我灭她满门月婵柳安澜李凤年在线(又名:娘子为师弟夺我秘宝后我灭她满门)_娘子为师弟夺我秘宝后我灭她满门月婵柳安澜李凤年在线(又名:娘子为师弟夺我秘宝后我灭她满门)全书免费
  • 离婚后嫁死对头,冷傲总裁红了眼:+后续列表_离婚后嫁死对头,冷傲总裁红了眼:+后续(姜岁宁顾寒川)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1