uniapp中h5、app实现在线预览pdf

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": ""
	        }
	        .....