微信公众号及PC端使用pdfjs插件预览实操

因为微信公众号内置了一些代码，会阻止你通过https的方式访问其他网页，比如你的网络路径pdf，安卓用户使用<iframe>组件打开后会空白甚至让你去下载，IOS用户就是直接预览。然后我就开始想办法，怎么能让安卓用户预览，不去下载。网上找了一堆，都没解决，最后还是决定用pdfjs-2.5.207来解决，我是实操解决的哟。有问题的小伙伴可以跟着我的步骤一起解决

上预览效果图！

一、文件准备

1.下载pdfjs，旧版本哟，需要在web文件里有viewer.js文件的,那些下下来是viewer.mjs的,我不会操作哈~

我在这里也顺便附上百度网盘链接:

百度网盘 请输入提取码百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固，支持教育网加速，支持手机端。注册使用百度网盘即可享受免费存储空间https://pan.baidu.com/s/1_Ndjc7z0Pk8qDuUpnw7vcg提取码:pj6x

下载好后,把pdfjs_2.0.943.zip解压到你的前端文件的public下,这里我用我的路径:public -> static -> js下

重点来啦!!!

在viewer.js文件里,搜索 throw new Error('file origin does not match viewer\'s'); 这个,然后将他干掉!!!

那么第一步就完成啦！

二、文件预览

window.open(`/static/js/web/viewer.html?file=${encodeURIComponent(你的网络文件url}`)

好!至此大功告成,简单吧~得到帮助的童鞋点点赞呗~

三、嘿嘿,我还在!有不想用pdfjs的童鞋,并且也是web端预览的,可以看这里

1.后端接口

/**
 * pdf流传输
 */
@GetMapping("/pdfStream")
public void previewPdf(@RequestParam(name = "fileUrl") String fileUrl, HttpServletRequest request, HttpServletResponse response) throws IOException {
   int i = fileUrl.lastIndexOf("/") + 1;
   String resourceUrl = fileUrl.substring(0,i);
   String fileName = fileUrl.substring(i); // 文件名称
   fileName = URLEncoder.encode(fileName,"UTF-8");
   fileUrl = resourceUrl+fileName;
   URL url = new URL(fileUrl);
   HttpURLConnection conn = (HttpURLConnection) url.openConnection();
   conn.setRequestMethod("GET");
   conn.setConnectTimeout(5 * 1000);
   InputStream inStream = conn.getInputStream();
   ByteArrayOutputStream outStream = new ByteArrayOutputStream();
   byte[] buffer = new byte[1024];
   int len = 0;
   while ((len = inStream.read(buffer)) != -1) {
      outStream.write(buffer, 0, len);
   }
   byte[] data = outStream.toByteArray();
   int fileSize = data.length;

   response.reset();
   response.setContentType("application/pdf"); // application/msword, application/x-excel, application/vnd.ms-excel, application/ms-powerpoint, application/pdf
   response.setHeader("Content-Disposition",
      "attachment; filename=" + fileName); //fileN应该是编码后的(utf-8)
   response.setContentLength(fileSize);

   OutputStream outputStream = response.getOutputStream();
   outputStream.write(data);

   outputStream.flush();
   outputStream.close();
   conn.disconnect();
}

2.PC前端预览

import axios from 'axios' // 引入原生的axios,不作封装处理

await axios({

    method: 'GET',

    headers: { token },

    url: `api/pdfStream`,

    responseType: 'blob' //更改responseType类型为 blob, 如果是uni.request请求接口，不妨试试将 responseType: "blob"改成 responseType: "arraybuffer"；

}).then(res => {

    // 转换pdf

    const blob = new Blob([res.data], { type: 'application/pdf;chartset=UTF-8' });

    const url = window.URL.createObjectURL(blob);

    window.open(url)

}).catch(err => {

    console.log(err)

})

3.PC前端下载

console.log("这是下载的接口res", res);

const blob = new Blob([res.data], {type: "application/octet-stream;chartset=UTF-8"});

const url = window.URL.createObjectURL(blob);

var a = document.createElement("a");

a.href = url;

//文件名

a.download = this.dowloadFile.file_name;

a.click();

点赞!

你的点赞就是我的动力.都看到这里的小伙伴麻烦点赞点赞点赞!!!