接收后端返回的pdf文件流前端实现预览（下载打印搜索内容）_pdf文件流预览_厚积薄发的Cicci的博客

废话不多说直接说下我过程中实现的步骤：

①：到官网下载包 https://github.com/mozilla/pdf.js/releases/download/v1.10.88/pdfjs-1.10.88-dist.zip
②：解压包到项目目录中
在这里插入图片描述
③：修改viewer.js
var DEFAULT_URL = ‘compressed.tracemonkey-pldi-09.pdf’ //里面是PDF的路径删除该变量定义(注释掉）
再找到 2080 行
  var fileOrigin = new URL(file, window.location.href).origin;
  if (fileOrigin !== viewerOrigin) {
    throw new Error('file origin does not match viewer\'s');
   if (file && 'byteLength' in file) {
      } else{
        var fileOrigin = new URL(file, window.location.href).origin;
        if (fileOrigin !== viewerOrigin) {
          throw new Error('file origin does not match viewer\'s');
④：打开viewer.html 在<script src="viewer.js"></script> 上方添加以下代码： 
 <script src="../../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
   // 这里是截取地址栏=后面的参数 可选中其它办法
    function getArgsFromHref(sArgName){
    //   var sHref=window.location.href;
      var sHref = location.search;
      var args = sHref.split(sArgName+"=");
      var retval = "";
      //args is null
      if(args[0] == sHref){
        return retval;
      var retval = args[1];
      return retval;
    var url_file=getArgsFromHref("url_file");
    var DEFAULT_URL = "";//注意，删除的变量在这里重新定义  
    var PDFData = "";
    $.ajax({
      type:"post",
      async:false,
      mimeType: 'text/plain;charset=x-user-defined',
      url:url_file,
      success:function(data){
         PDFData = data;
    });
    var rawLength = PDFData.length;
    //转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068  
    var array = new Uint8Array(new ArrayBuffer(rawLength));    
    for(i = 0; i < rawLength; i++) {  
      array[i] = PDFData.charCodeAt(i) & 0xff;
    DEFAULT_URL = array;
    </script>
需要展示pdf文档的页面盒子
 
 把viewer.html 用iframe嵌套进去 

 我在viewer.html下一步请求操作： 
页面显示效果： 
注： 自己更改下默认样式 来搭配自己项目主体（其工具栏中文报错：要部署在服务器上才会生效 可自行搭建服务器查看） 
帮到点个赞哈~

                    首先  说下这方面的需求： 向后台发送对应的id参数  拿到相关pdf的文件流  如下：由于没做过pdf预览功能  在网上看了好多教程  眼花缭乱  同时也试了很多种  不是报错  就是 报错其中Vue的教程  下载插件vue-pdf  根据文档教程满足我的需求  也实现了我想要的效果  但是做的项目是之前的老项目 纯原生写的 所以还是要看pdf.js的官网废话不多说 直接说下我过程中实现的步骤：①： 到官网下载包https://github.com/mozilla/pdf.js/releases
				原生js实现预览图片、PDF
服务返回二进制流，用axios处理，指定blob类型，然后再转换成URL（ 处理后会变成blob://... 这种格式)；图片的话，作为src地址可以直接实现；预览PDF需要服务端的响应头Content-Type 为PDF类型application/pdf，不指定这种类型会直接下载，不能预览;
axios指定responseType为blob类型接收响应：
axios.get('url',{
   params:{
       key:this.key
				纯原创资源，盗用必究，仅用于学习和交流，持续更新，可私信了解。
1. 整合目前市面上所有的纯前端Web组件，并二次开发改进稳定性
2. 目前最灵活的接入方案，基于Html5 postMessage传送blob数据，高度解耦
3. 支持所有文本、代码格式，所有主流图片格式，.mp4，.docx，.xlsx，.pptx, .pdf等主流文档格式的纯前端预览
4. 附带接入demo，使用纯js实现，可以用于任何场景
				Java 后端可以使用 HttpServletResponse 的 OutputStream 来返回 PDF 文件给微信小程序。具体实现步骤如下：
1. 在后端，使用 PDFBox 等工具生成 PDF 文件。
2. 将 PDF 文件保存到服务器上，获取文件的路径或者字节数组。
3. 在返回响应之前，设置 response 的 content type 为 "application/pdf"。
4. 使用 response.getOutputStream() 获取字节输出流。
5. 将 PDF 文件的字节数组或者输入流写入到输出流中。
6. 关闭输出流。
示例代码：
```java
@RequestMapping("/downloadPDF")
public void downloadPDF(HttpServletResponse response) throws IOException {
    // 生成 PDF 文件
    PDDocument doc = new PDDocument();
    PDPage page = new PDPage();
    doc.addPage(page);
    PDFont font = PDType1Font.TIMES_ROMAN;
    PDPageContentStream contentStream = new PDPageContentStream(doc, page);
    contentStream.beginText();
    contentStream.setFont(font, 12);
    contentStream.newLineAtOffset(100, 700);
    contentStream.showText("Hello, World!");
    contentStream.endText();
    contentStream.close();
    ByteArrayOutputStream baos = new ByteArrayOutputStream();
    doc.save(baos);
    doc.close();
    byte[] pdfBytes = baos.toByteArray();
    // 返回响应
    response.setContentType("application/pdf");
    response.setHeader("Content-Disposition", "attachment; filename=\"test.pdf\"");
    response.setContentLength(pdfBytes.length);
    ServletOutputStream sos = response.getOutputStream();
    sos.write(pdfBytes);
    sos.flush();
    sos.close();
注意：以上示例代码仅供参考，实际代码需要根据具体情况进行调整和完善。
                    CSDN-Ada助手: 
                    嗨～好久未见你更新博文了，我们现在上线了AI创作助手哦～可为你的创作提供智能化帮助，快来试试吧～https://editor.csdn.net/md/?not_checkout=1&utm_source=blog_comment_recall，在编辑器页面右侧哦～～限免！！
同时我们为您准备了一份回归奖励，快来看看吧https://activity.csdn.net/creatActivity?id=10430&utm_source=blog_comment_recall
                接收后端返回的pdf文件流 前端使用Vue-pdf实现预览(分页）
                    ChenJunFa_: 
                    打包文件为啥多出两个worker.js
                Vue 实现导出功能及解决导出excel表格无法打开的问题
                    小小哭包: 
                    可以可以，正好遇到此问题
                接收后端返回的pdf文件流 前端使用Vue-pdf实现预览(分页）
                    卡卡夫卡: 
                    你好呀，可以提供源码给我嘛
                Layui upload动态传参，后台接收不到，解决方法
                    撸BUG: 
                    有人写出后台了么，PHP的  怎么接收携带的数据
废话不多说 直接说下我过程中实现的步骤：

帮到点个赞哈~

废话不多说直接说下我过程中实现的步骤：
