uniapp h5/app 实现在线预览pdf
1.在项目中引入文件
https://gitee.com/CRJ120399/uniapp_pdf.git
把文件放入src目录下
2.pdf.vue
创建一个pdf.vue 文件。从上一个页面跳转过来的时候,带上了导航栏的名字和一个访问路径。(:url="/pages/file/pdf?name=抢险记录&url=${fileUrl}
")
这一步的时候要注意一个问题,后端传入的不要传入完整的链接。
http://192.XX.XX.XX/file/20210201/抢险记录_2021-02-01.pdf ----> 这样的路径会报错,或者就是没有显示。
/file/20210201/抢险记录_2021-02-01.pdf —>正确的
<template>
<view>
<web-view :src="pdfUrl"></web-view>
</view>
</template>
<script>
import {
mapGetters } from "vuex";
export default {
data() {
return {
pdfUrl: "",
from: ""
};
},
computed: {
...mapGetters(["file_url"])
},
onLoad(options) {
uni.setNavigationBarTitle({
title: options.name
});
// 浏览情景1:浏览本地的pdf文件
// this.pdfUrl = "./../hybrid/html/web/viewer.html?file=./compressed.tracemonkey-pldi-09.pdf";
// 浏览情景2:浏览在线的pdf文件
let url = "";
// #ifdef H5
url = "/file";
// #endif
// #ifndef H5
url = this.file_url;
// #endif
console.log(`${
url}${
options.url}`);
this.pdfUrl = "/hybrid/html/web/viewer.html?file=" + encodeURIComponent(`${
url}${
options.url}`);
},
methods: {
/**
* 下载情景
*/
downloadPdfClick() {
// 下载情景1:h5内嵌app,通过分享给朋友的方式进行下载
if (this.from == "app") {
let item = "http://自己的域名/hybrid/html/web/pdf.html?shareUrl=" + encodeURIComponent(this.bgUrl) + "&shareTitle=PDF文件";
window.open(item);
return;
} else if (this.from == "wx wq") {
// 下载情景2:h5内嵌微信小程序,从h5页面跳转到小程序页面后,然后通过调用小程序原生API进行下载
// 注意: 先要引入微信jssdk [命令: npm install jweixin-module]
// this.$wx.miniProgram.navigateTo({
// url: '/pages/pdf/pdf_download?pdf='+ encodeURIComponent(this.bgUrl) //小程序页面链接
// });
}
}
}
};
</script>
<style lang="scss"></style>
3.配置跨域
这一步之后可能你的页面会变成这样,这个时候不要慌,修改一下vue.config.js。
proxy: {
// 配置跨域
"/file": {
target: process.env.VUE_APP_APP_UPLOADFILE,
ws: true,
changOrigin: true,
pathRewrite: {
"^/file": ""
}
.....
测试过了,这样H5 和 app 都能显示哦~ 有什么问题可以呼叫我哈~~ 有缘再见ヾ( ̄▽ ̄)Bye~Bye~