http://cn.voidcc.com/question/p-yvggeggf-bmw.html
这个哥们和我遇到了一样的问题,所以我也改了思路,将 html 变成 base64,在存到手机里。手机自带的功能是可以打印转成PDF 的。上代码:
htmlToPdf.js
// 下面两个package要单独安装
import html2Canvas from 'html2canvas'
export default{
install (Vue, options) {
Vue.prototype.getPdf = function (id, fileName) {
if (typeof html2Canvas == null)
throw Error("html2Canvas is not defined");
if (id == null)
throw Error("saveDomImage param : dom is null");
if (fileName == null || fileName == "")
fileName = "untitled.png";
html2Canvas(document.querySelector(`#${id}`), {
// allowTaint: true
useCORS:true // 看情况选用上面还是下面的,
}).then(function (canvas) {
let dataUrl = canvas.toDataURL('image/jpeg', 1.0);
let bitblmap = new plus.nativeObj.Bitmap('bitblmap');
bitblmap.loadBase64Data(dataUrl, function () {
console.log("加载Base64图片数据成功");
bitblmap.save('_doc/' + fileName, { overwrite: true }, function (object) {
console.log('保存图片成功:' + JSON.stringify(object));
plus.gallery.save('_doc/' + fileName, function () {
console.log('图片已保存到相册');
}, function (e) {
console.log('保存图片到相册失败:'+JSON.stringify(e));
})
}, function (e) {
console.log('保存图片失败:'+JSON.stringify(e));
})
}, function (e) {
console.log('加载Base64图片数据失败:'+JSON.stringify(e));
})
}
)
}
}
}
main.js
import htmlToPdf from '@/util/htmlToPdf';
Vue.use(htmlToPdf);
html
<van-button @click="getPdf('pdfDom', 'xxdjbctzs.png')" type="info" size="small"> 导出pdf </van-button>