前言：正式上线，在小程序后台配置业务域名

一、uniapp 使用 webview

<code><template>

<web-view :src="url" @message="message"></web-view>code>

</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].imageData

let 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 转为 arrayuffer

success(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>code>

</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 = this

var 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-line

var pdf = new jsPDF('l', 'mm', [width * 0.545, height * 0.545]);

} else {

// eslint-disable-next-line

var 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 H5

var 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

},