uni-app使用pdfjs插件预览pdf文件

pdfjs插件下载地址

pdf.js官方网站下载

效果预览

用法说明

插件下载下来为 pdfjs-3.6.172-legacy-dist.zip (以3.6.172为例)，解压包含 build 和 web 两个文件夹。将这两个文件夹复制到 uni-app项目/hybrid/html 目录下，如下所示：

uni-app-project/
├── hybrid
│	└── html	
│		├── build/
│		│   ├── pdf.js                             - display layer
│		│   ├── pdf.js.map                         - display layer's source map
│		│   ├── pdf.worker.js                      - core layer
│		│   └── pdf.worker.js.map                  - core layer's source map
│		├── web/
│		│   ├── cmaps/                             - character maps (required by core)
│		│   ├── compressed.tracemonkey-pldi-09.pdf - PDF file for testing purposes
│		│   ├── debugger.js                        - helpful debugging features
│		│   ├── images/                            - images for the viewer and annotation icons
│		│   ├── locale/                            - translation files
│		│   ├── viewer.css                         - viewer style sheet
│		│   ├── viewer.html                        - viewer layout
│		│   ├── viewer.js                          - viewer layer
│		│   └── viewer.js.map                      - viewer layer's source map
│		└── LICENSE
├── App.vue
├── manifest.json
├── package.json
├── package-lock.json
├── ...
└── pages.json

创建预览模板页面文件，以pdf-view.vue为例

<template>
  <view>
    <web-view :src="allUrl"></web-view>
  </view>
</template>
 
<script>
  export default {
    data() {
	  return {
	    viewerUrl: '/hybrid/html/web/viewer.html', 
		allUrl: ''
	  }
	},
	onLoad(options) {
		this.allUrl = this.viewerUrl + '?file=' + options.url
	}
  }
</script>

其他页面需要打开pdf文件的地方调用，以按钮点击clickRight()方法为例

clickRight(){
	var param = {
		"fileId":this.fileId
	};
	this.$API.getFileResource(param).then(res => {
		let pdfData = res; //pdfData是后端返回的文件流
		let blob = new Blob([ pdfData], {
			type: 'application/pdf;charset=UTF-8'
		})
		pdfData = window.URL.createObjectURL(blob) //创建预览路径
		this.fileUrl = encodeURIComponent(pdfData)
		uni.navigateTo({
			url: '/pages/pdf/pdf-view?url=' + this.fileUrl
		})
	});
}

前端pdf文件请求方法参考

function requestFile(requestData, resolve, reject) {
	requestData.url = java_server + requestData.url;
	requestData.header = {
		'content-type': 'application/x-www-form-urlencoded',
		'token': localStorage.getItem("token") || ''
	}
	requestData.responseType = 'arraybuffer';//这里记得设置响应数据格式，不然预览的pdf是空白
	uni.showLoading({
		title: '加载中...',
		mask: true
	})
	uni.request(requestData).then(res => {
		if (!res[1]) {
			if (res[0].errMsg == "request:fail") {
				if (needLoadingRequestCount <= 0) {
					uni.hideLoading()
				}
				resolve(res[0] = {
					data: {
						code: '500'
					}
				})
			}
			reject(res[0])
		} else {
			resolve(res[1].data);
			uni.hideLoading();
		}
		throw res[1].data;
	}).catch(
		parmas => {
			// uni.showToast({
			// 	icon: 'none',
			// 	title: "请求后台服务异常"
			// })
			uni.hideLoading()
		}
	)
}

后端服务接口参考

import com.itextpdf.text.Document;
import com.itextpdf.text.pdf.*;
import org.apache.commons.io.IOUtils;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedOutputStream;
import java.io.ByteArrayOutputStream;
import java.io.OutputStream;
import java.net.URL;
import java.net.URLEncoder;

@RequestMapping("/getFileResource")
public void getFileResource(HttpServletRequest request, HttpServletResponse response) {
	HttpServletRequest httpServletRequest = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
		String fileId = httpServletRequest.getParameter("fileId");
		FileDO fileDO = fileService.selectByFileId(fileId);
		String fileUrl = fileDO.getFileUrl();
		String filename = fileDO.getFileName();
		OutputStream os = null;
		Document document = null;
		try {
			String userAgent = request.getHeader("User-Agent");  
		    // 针对IE或者以IE为内核的浏览器：  
		    if (userAgent.contains("MSIE") || userAgent.contains("Trident")) {  
		    	filename = URLEncoder.encode(filename, "UTF-8");  
		    } else {  
		        // 非IE浏览器的处理：  
		    	filename = new String(filename.getBytes("UTF-8"), "ISO-8859-1");  
		    }
			response.reset();
			response.setContentType("application/octet-stream;charset=ISO-8859-1");
			response.addHeader("Content-Disposition", "attachment;filename=" + filename + ".pdf");
//			response.setHeader("Access-Control-Allow-Origin", "*");
			// 得到文件二进制封装得到数据，具有通用性
			os = new BufferedOutputStream(response.getOutputStream());
			// 合并pdf
			document = new Document();
			PdfCopy copy = new PdfCopy(document, os);
			document.open();
			copyPage(document, copy, fileUrl);
		} catch (Exception e) {
			log.error("读取pdf文件失败:{}", e);
			throw new RuntimeException("读取pdf文件失败", e);
		} finally {
			if (document != null) {
				document.close();
			}
			IOUtils.closeQuietly(os);
		}
	}
}
	
public static void copyPage(Document document, PdfCopy copy, String fileUrl)throws Exception {
	URL url = new URL(fileUrl);
	PdfReader reader = null;
	try {
		reader = new PdfReader(url);
		int n = reader.getNumberOfPages();// 获得总页码
		for (int j = 1; j <= n; j++) {
			document.newPage();
			PdfImportedPage page = copy.getImportedPage(reader, j);
			copy.addPage(page);
		} 
	} finally {
		if (reader != null) {
			reader.close();
		}
	}
}