# pdfjs

**Repository Path**: music_poor/pdfjs

## Basic Information

- **Project Name**: pdfjs
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-21
- **Last Updated**: 2022-01-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# pdfjs

#### 介绍
PDFJS : 将后端Blob文件流转为pdf展示在页面上，

#### 需求
内嵌在页面，不打开新页面因此技术方案采用iframe标签

#### 效果

![image-20220121163131107](image-20220121163131107.png)


#### 使用步骤

1. 克隆 https://gitee.com/music_poor/pdfjs.git ，下载完成后解压文件

2. 在自己vue项目根目录下找到public文件，将解压的文件粘贴进去，我的vue-cli版本是4.0.4 ，如图所示

3. ![image-20220121163753537](image-20220121163753537.png)

4. 在request请求接口的api中加上响应数据类型responseType: 'blob' , 解决空白也问题

   ```js
   import request from '@/utils/request'
   
   const excelApi = {
       // 2022/1/19
       view_document: '/knowledgebase/view_document' // 查看文档
   }
   export function view_document (parameter) {
       return request({
           url: excelApi.view_document,
           method: 'get',
           params: parameter,
           responseType: 'blob'
       })
   }
   ```

5.  DOM

    ```html
    <iframe :src="pdfUrl" frameborder="0" style="width: 100%; height: 60vh"></iframe>
    ```

6.  JS

    ```js
    import { view_document } from '@/api/excel'
    export default {
    	data () {
            	return {
               		pdfUrl: '',
            	}
        	},
     	methods:{
    		// 单级触发
            handleAdd (item) {
                this.pdfUrl = ''
                const { file_uniq, uniq, type, introduction, file_type } = item
                    const params = {
                        file_uniq,
                        uniq
                    }
                    // pdf
                     view_document(params).then(res => {
                          let urlPdf = window.URL.createObjectURL(new Blob([res]))
                           this.pdfUrl = '/pdf/web/viewer.html?file=' + encodeURIComponent(urlPdf)
                           this.pdfUrlVisited = true
                           this.introductionVisible = true
                    })
                    
                // console.log(file_uniq)
                // console.log(uniq)
            }
    	}
    }
    ```