vue 在线访问word,excel,pdf 文件以及打印

今天药忘吃喽~ 2021-09-07 06:20 1193阅读 0赞

# [git 项目代码][git] #

# 一.pdf #

## 1. vue-pdf ##

### 安装  ###

npm i --save vue-pdf

### 语法 ###

在组件种使用
    
    import pdf from 'vue-pdf'
    
    
    pdf.createLoadingTask(url,httpHeaders);
    
    
    参数： url(所请求的接口),headers(请求头信息)
    或者url  是pdf 的链接地址

### 案例 ###

（1）简单使用

<template>
        <div>
            <pdf ref="pdf" :src="url"> </pdf>
        </div>
    </template>
    
    <script>
    import pdf from "vue-pdf";
    export default {
        components: {
            pdf,
        },
        data() {
            return {
                url:"http://image.cache.timepack.cn/nodejs.pdf",
            };
        },
        mounted() {
        },
        methods: {
        },
    };

注意：这个只用于只有一页的文件

（2）分页

<template>
        <div class="pdf">
            <p class="arrow">
                
                <span
                    @click="changePdfPage(0)"
                    class="turn"
                    :class="{ grey: currentPage == 1 }"
                    >上一页 </span
                >
                {
       { currentPage }} / {
       { numPages }}
                
                <span
                    @click="changePdfPage(1)"
                    class="turn"
                    :class="{ grey: currentPage == numPages }"
                    >下一页</span
                >
            </p>
            <pdf
                :src="src"
                :page="currentPage"
                @num-pages="numPages = $event"
                @page-loaded="currentPage = $event"
                @loaded="loadPdfHandler"
            >
            </pdf>
        </div>
    </template>
    
    <script>
    import pdf from "vue-pdf";
    export default {
        components: { pdf },
        data() {
            return {
                currentPage: 0, // pdf文件页码
                numPages: 0, // pdf文件总页数
                src: "./git使用说明.pdf", // pdf文件地址  
            };
        },
        created() {
            // 请求地址
            var headers = {
                Authorization: "Bearer SOME_TOKEN",
                "x-ipp-device-uuid": "SOME_UUID",
                "x-ipp-client": "SOME_ID",
                "x-ipp-client-version": "SOME_VERSION",
            };
            var loadingTask = pdf.createLoadingTask({
                url: "http://image.cache.timepack.cn/nodejs.pdf",
                httpHeaders: headers,
            });
            this.src = loadingTask;
    
            // 本地 文件放在public 里
            //  this.src = pdf.createLoadingTask(this.src);
        },
        methods: {
            // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
            changePdfPage(val) {
                // console.log(val)
                if (val === 0 && this.currentPage > 1) {
                    this.currentPage--;
                }
                if (val === 1 && this.currentPage < this.numPages) {
                    this.currentPage++;
                }
            },
    
            // pdf加载时
            loadPdfHandler(e) {
                this.currentPage = 1; // 加载的时候先加载第一页
            },
        },
    };
    </script>
    
    <style scoped>
    .turn {
        padding: 5px;
        background-color: skyblue;
        border-radius: 5px;
        color: #ffffff;
        cursor: pointer;
    }
    </style>

（3）请求接口 或者 是外部链接的pdf

<template>
        <div>
            <pdf
                ref="pdf"
                v-for="i in numPages"
                :key="i"
                :src="src"
                :page="i"
                @loaded="docLoaded" 
                @page-loaded ="pageLoaded"
            ></pdf>
        </div>
    </template>
    <script>
    import pdf from "vue-pdf";
    export default {
        components: {
            pdf,
        },
        data() {
            return {
                src:"",
                numPages: null, // pdf 总页数
            };
        },
        mounted() {
            this.getNumPages();
        },
        methods: {
            getNumPages() {
                var headers = {
                    Authorization: "Bearer SOME_TOKEN",
                    "x-ipp-device-uuid": "SOME_UUID",
                    "x-ipp-client": "SOME_ID",
                    "x-ipp-client-version": "SOME_VERSION",
                };
                var loadingTask = pdf.createLoadingTask({
                    url: "http://image.cache.timepack.cn/nodejs.pdf",
                    httpHeaders: headers,
                });
                loadingTask.promise
                    .then((pdf) => {
                        console.log('11',pdf)
                        this.src=loadingTask;
                        this.numPages = pdf.numPages;
                    })
                    .catch((err) => {
                        console.error("pdf 加载失败", err);
                    });
            },
            docLoaded(){
                console.log('加载种')
            },
            pageLoaded(){
                console.log('加载结束')
            }
        },
    };
    </script>

（4）分页

（5）vue-pdf 打印

<template>
        <div>
            <pdf ref="pdf" :src="url"> </pdf>
    <button type="primary"  @click="print">打印</a-button>
        </div>
    </template>
    
    <script>
    import pdf from "vue-pdf";
    export default {
        components: {
            pdf,
        },
        data() {
            return {
                url:"http://image.cache.timepack.cn/nodejs.pdf",
            };
        },
        mounted() {
        },
        methods: {
            print() {
              this.$refs.pdf.print()
            },
        },
    };

（6）vue-pdf预览base64数据为pdf

使用CMapReaderFactory

1.引入
    
    import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
    
    2.重置一下pdf文件
    
    this.pdfUrl = pdf.createLoadingTask({ url: res.data.datas.invoicePicUrl, CMapReaderFactory })

## 2. pdfjs ##

[官网下载压缩包][Link 1]（下载稳定版）

### 使用 ###

1. 使用 文件解压 放在public/static/pdf
    
    2.vue 访问viewer.html时404 时
       const path = require('path')
    // const CompressionPlugin = require("compression-webpack-plugin")
    function resolve(dir) {
    	return path.join(__dirname, dir)
    }
    
    module.exports = {
        chainWebpack: (config) => {
            config.resolve.alias.set('static',resolve('public/static'))
          }
    };
    
    
    3. 组件上使用
    
    	 <iframe
                :src="'/static/pdf/web/viewer.html?file='+url"
                scrolling="no"
                style="width: 100%; height: 800px"
                frameborder="0"
            ></iframe>
    
       url:'./git使用说明.pdf'

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70][]

##  3.  HTML网页生成图片 ##

npm install --save html2canvas

使用

（1）.封装组件

// 导出页面为图片
    import html2Canvas from 'html2canvas'
    export default {
        install(Vue, options) {
            Vue.prototype.getImage = function (id, title) {
                return new Promise((resolve, reject) => {
                    html2Canvas(document.querySelector(`#${id}`), {
                        allowTaint: true
                    }).then(function (canvas) {
                        let contentWidth = canvas.width
                        let contentHeight = canvas.height
                        let pageHeight = contentWidth / 592.28 * 841.89
                        let leftHeight = contentHeight
                        let position = 0
                        let imgWidth = 595.28
                        let imgHeight = 592.28 / contentWidth * contentHeight
                        let pageData = canvas.toDataURL('image/jpeg', 1.0)
                        resolve(pageData)
                    })
                })
            }
        }
    }

（2）.使用

<template>
        <div>
            <button @click="pdfFn">导出PDF</button>
            <img :src="url" class="img" />
            <div id="pdfDom" style="padding-top: 55px; background-color: #fff">
                <h1>vue HTML网页生成PDF格式</h1>
                <p>
                    大概思路 => 就是将页面转换成图片格式 .然后通过图片的base64码
                    生成PDF格式 保存到本地。
                </p>
                <div>
                    <p>需要两个插件：</p>
                     npm install --save html2canvas<br />
                    npm install jspdf --save
                </div>
            </div>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                htmlTitle: "html导出PDF",
                url: "",
            };
        },
        methods: {
            async pdfFn() {
                this.url = await this.getImage("pdfDom", this.htmlTitle);
            },
        },
    };
    </script>
    
    <style>
    .img {
        width: 800px;
        border: 1px solid #ccc;
        padding: 10px;
        display: block;
        margin: 10px auto;
    }
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1][]

## 4.  HTML网页生成PDF格式 ##

大概思路 => 就是将页面转换成图片格式 .然后通过图片的base64码 生成PDF格式 保存到本地。

需要两个插件：

npm install --save html2canvas

npm install jspdf --save

使用

（1）.封装组件

// 导出页面为PDF格式
    import html2Canvas from 'html2canvas'
    import JsPDF from 'jspdf'
    export default {
        install(Vue, options) {
            Vue.prototype.getPdf = function (id, title) {
                html2Canvas(document.querySelector(`#${id}`), {
                    allowTaint: true
                }).then(function (canvas) {
                    let contentWidth = canvas.width
                    let contentHeight = canvas.height
                    let pageHeight = contentWidth / 592.28 * 841.89
                    let leftHeight = contentHeight
                    let position = 0
                    let imgWidth = 595.28
                    let imgHeight = 592.28 / contentWidth * contentHeight
                    let pageData = canvas.toDataURL('image/jpeg', 1.0)
                    let PDF = new JsPDF('', 'pt', 'a4')
                    if (leftHeight < pageHeight) {
                        PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
                    } else {
                        while (leftHeight > 0) {
                            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                            leftHeight -= pageHeight
                            position -= 841.89
                            if (leftHeight > 0) {
                                PDF.addPage()
                            }
                        }
                    }
                    PDF.save(title + '.pdf')
                }
                )
            }
        }
    }

（2）.注册

main.js

import htmlToPdf from '@/utils/htmlToPdf'
    Vue.use(htmlToPdf)

（3）.组件

<template>
        <div>
            <button @click="pdfFn">导出PDF</button>
            <div id="pdfDom" style="padding-top: 55px; background-color: #fff">
                <h1>vue HTML网页生成PDF格式</h1>
                <p>
                    大概思路 => 就是将页面转换成图片格式 .然后通过图片的base64码
                    生成PDF格式 保存到本地。
                </p>
            </div>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                htmlTitle: "html导出PDF",
            };
        },
        methods: {
            pdfFn() {
                this.getPdf("pdfDom", this.htmlTitle);
            },
        },
    };
    </script>

# 二.word #

Mammoth 旨在将 word文档 将其转换为 HTML。Mammoth 的目标是通过使用文档中的语义信息并忽略其他细节来生成简单干净的 HTML。

Mammoth.js 这个库同时支持 Node.js 和浏览器两个平台。

## 安装 ##

npm install --save mammoth

## 常用的 API ##

1. mammoth.convertToHtml(input, options：把源文档转换为 HTML 文档
    
    
    mammoth.convertToHtml(input, options) 将源文档转换为 HTML input: 描述源文档的对象。 在
    
    node.js 上，支持以下输入： {path: path}，其中 path 是. docx 文件的路径。 {buffer:
    
    buffer}，其中 buffer 是包含. docx 文件的node.js 缓冲区。 在浏览器中，支持以下输入：
    
    {arrayBuffer: arrayBuffer}，其中 arrayBuffer 是包含. docx 文件的array 缓冲区。
    
    options ( 可选): 转换的选项。 浏览器表示支持arrayBuffer 转换也仅仅支持docx
    
    只能预览.docx文件不能预览doc文件
    
    
    2. mammoth.convertToMarkdown(input, options)：把源文档转换为 Markdown 文档。这个方法与 convertToHtml 方法类似，区别就是返回的 result 对象的 value 属性是 Markdown 而不是 HTML。
    
    
    3. mammoth.extractRawText(input)：提取文档的原始文本。这将忽略文档中的所有格式。每个段落后跟两个换行符。

##  ##

## 注意  ##

1.docx可以解析,doc 不行

2.只能适应于 结构简单word文件

docx使用的结构和HTML的结构之间存在很大的不匹配，这意味着转换不太可能适合更复杂的文档。如果只使用样式对文档进行语义标记，那么Mammoth的效果最好。

eg:标题，图片，粗体、斜体、下划线、删除线、上标和下。。。。

3. 直接访问本地的文件地址，或是线上的地址，如下操作，会报错”Could not find file in options “，不懂是为啥，有待研究

mammoth.convertToHtml({path: "E:\gitProgram\gitee\vue-pdf-word\public\words.docx"})
            .then(function (resultObject) {
    		   vm.vHtml =resultObject.value;
    		});
            .done();

4.  **服务端请求接口下载文件，在放到mammoth.convertToHtml(\{arrayBuffer: new Uint8Array(xhr.response)\})转换得到值 **

## 案例 ##

（1）开发方式：服务端请求接口下载文件，在放到mammoth.convertToHtml(\{arrayBuffer: new Uint8Array(xhr.response)\})转换得到值

<template>
        <div>
            <div id="wordView" v-html="vHtml" />
        </div>
    </template>
    
    <script>
    import mammoth from "mammoth";
    export default {
        name: "word",
        data() {
            return {
                vHtml: "",
                wordURL: "", //文件地址
            };
        },
        created() {
            let vm = this;
            vm.wordURL = "http://localhost/dev-api/common/download?fileName=/profile/upload/2021/03/29/000b83ee-0fb1-46a6-8d15-addaa9bd5b7f.docx&delete=false";
            const xhr = new XMLHttpRequest();
            xhr.open("get", this.wordURL, true);
            xhr.responseType = "arraybuffer";
            xhr.onload = function () {
                if (xhr.status == 200) {
                    mammoth
                        .convertToHtml({
                            arrayBuffer: new Uint8Array(xhr.response),
                        })
                        .then(function (resultObject) {
                           vm.vHtml =resultObject.value;
                        });
                }
            };
            xhr.send();
        },
        methods: {},
    };
    </script>
    
    <style>
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 2][]

（2）.[官网提供的操作][Link 2]

input【type=“file”】

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 3][]

# 三.excel #

## 理解 ##

由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。

[官网][Link 3]

## 安装 ##

npm install --save xlsx

## 常用api ##

### 读取excel  XLSX.read(data, \{type: type\}) ###

读取excel主要是通过XLSX.read(data, {type: type});方法来实现，返回一个叫WorkBook的对象，type主要取值如下：
    
        base64: 以base64方式读取；
        binary: BinaryString格式(byte n is data.charCodeAt(n))
        string: UTF8编码的字符串；
        buffer: nodejs Buffer；
        array: Uint8Array，8位无符号数组；
        file: 文件的路径（仅nodejs下支持）；

## 详解 workbook ##

### 1. Workbook Object ###

`workbook`里面有什么东西呢，我们打印出来看一下：

![aeefdcd4a60105f3c776c870cdc7fad7.png][]

可以看到，`SheetNames`里面保存了所有的sheet名字，然后`Sheets`则保存了每个sheet的具体内容（我们称之为`Sheet Object`）。每一个`sheet`是通过类似`A1`这样的键值保存每个单元格的内容，我们称之为单元格对象（`Cell Object`）：

![35370b05085650a11cecb20e601ed3f2.png][]

### 2. Sheet Object ###

每一个`Sheet Object`表示一张表格，只要不是`!`开头的都表示普通`cell`，否则，表示一些特殊含义，具体如下：

*  `sheet['!ref']`：表示所有单元格的范围，例如从A1到F8则记录为`A1:F8`；
 *  `sheet[!merges]`：存放一些单元格合并信息，是一个数组，每个数组由包含`s`和`e`构成的对象组成，`s`表示开始，`e`表示结束，`r`表示行，`c`表示列；
 *  等等；

关于单元格合并，看懂下面这张图基本上就没问题了：

![641d28a6228691a23bbee716a0b70bd4.png][]

结果如下：

![6517b4641265d80f1f740c17f418ffaf.png][]

### 3. 单元格对象 ###

每一个单元格是一个对象（`Cell Object`），主要有`t`、`v`、`r`、`h`、`w`等字段（详见[这里][Link 4]）：

*  t：表示内容类型，`s`表示string类型，`n`表示number类型，`b`表示boolean类型，`d`表示date类型，等等
 *  v：表示原始值；
 *  f：表示公式，如`B2+B3`；
 *  h：HTML内容
 *  w：格式化后的内容
 *  r：富文本内容`rich text`
 *  等等

### 4. 读取workbook ###

普通方法：

// 读取 excel文件
    function outputWorkbook(workbook) {
    	var sheetNames = workbook.SheetNames; // 工作表名称集合
    	sheetNames.forEach(name => {
    		var worksheet = workbook.Sheets[name]; // 只能通过工作表名称来获取指定工作表
    		for(var key in worksheet) {
    			// v是读取单元格的原始值
    			console.log(key, key[0] === '!' ? worksheet[key] : worksheet[key].v);
    		}
    	});
    }

根据`!ref`确定excel的范围，再根据`!merges`确定单元格合并（如果有），最后输出整个table，比较麻烦，幸运的是，插件自身已经写好工具类`XLSX.utils`给我们直接使用，无需我们自己遍历，工具类输出主要包括如下：

![d01cc25bcbc3c18c5024b5664824859b.png][]

有些不常用，常用的主要是：

XLSX.utils.sheet_to_csv：生成CSV格式
    XLSX.utils.sheet_to_txt：生成纯文本格式
    XLSX.utils.sheet_to_html：生成HTML格式
    XLSX.utils.sheet_to_json：输出JSON格式

常用的主要是`sheet_to_csv`或者`sheet_to_html`，转csv的话会忽略格式、单元格合并等信息，所以复杂表格可能不适用。转html的话会保留单元格合并，但是生成的是`<html></html>`代码，而不是`<table></table>`，需要对表格进行一些定制时不太方便，所以具体还是要视情况来采用合适的工具类。

这里写一个采用转csv方式输出结果的简单示例，可点击这里查看[在线DEMO][DEMO]：

## 案例 ##

请求接口

<template>
        <div>
            <h1>excel</h1>
            <div id="result" contenteditable></div>
        </div>
    </template>
    
    <script>
    import XLSX from "xlsx";
    export default {
        data() {
            return {};
        },
        created() {
            this.loadRemoteFile(
                "http://localhost/dev-api/common/download?fileName=/profile/upload/2021/03/30/47d820f0-7663-4354-b168-f826c2619fd9.xlsx&delete=false"
            );
        },
        methods: {
            // 请求网络接口
            loadRemoteFile(url) {
                let _this = this;
                this.readWorkbookFromRemoteFile(url, function (workbook) {
                    _this.readWorkbook(workbook);
                });
            },
            // 从网络上读取某个excel文件，url必须同域，否则报错
            readWorkbookFromRemoteFile(url, callback) {
                var xhr = new XMLHttpRequest();
                xhr.open("get", url, true);
                xhr.responseType = "arraybuffer";
                xhr.onload = function (e) {
                    if (xhr.status == 200) {
                        var data = new Uint8Array(xhr.response);
                        var workbook = XLSX.read(data, { type: "array" });
                        console.log(workbook,'table 数据')
                        if (callback) callback(workbook);
                    }
                };
                xhr.send();
            },
            // 读取文件
            readWorkbook(workbook) {
                var sheetNames = workbook.SheetNames; // 工作表名称集合
                var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
                var csv = XLSX.utils.sheet_to_csv(worksheet);
                document.getElementById("result").innerHTML = this.csv2table(csv);
            },
            // 将csv转换成表格
            csv2table(csv) {
                var html = "<table>";
                var rows = csv.split("\n");
                rows.pop(); // 最后一行没用的
                rows.forEach(function (row, idx) {
                    var columns = row.split(",");
                    columns.unshift(idx + 1); // 添加行索引
                    if (idx == 0) {
                        // 添加列索引
                        html += "<tr>";
                        for (var i = 0; i < columns.length; i++) {
                            html +=
                                "<th>" +
                                (i == 0 ? "" : String.fromCharCode(65 + i - 1)) +
                                "</th>";
                        }
                        html += "</tr>";
                    }
                    html += "<tr>";
                    columns.forEach(function (column) {
                        html += "<td>" + column + "</td>";
                    });
                    html += "</tr>";
                });
                html += "</table>";
                return html;
            },
        },
    };
    </script>
    
    <style>
    table {
        border-collapse: collapse;
    }
    th,
    td {
        border: solid 1px #6d6d6d;
        padding: 5px 10px;
    }
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 4][]

## 参考材料 ##

[如何使用JavaScript实现纯前端读取和导出excel文件][JavaScript_excel]

# 四 打印 #

## 监听打印预览对话框 ##

//定义打印前事件
            var beforePrint = function () {
                console.log("打印前");
            };
            //定义打印后事件
            var afterPrint = () => {
                console.log("打印后");
                
            };
            //监听window状态
            if (window.matchMedia) {
                var mediaQueryList = window.matchMedia("print");
                //为印添加事件
                mediaQueryList.addListener(function (mql) {
                    if (mql.matches) {
                        beforePrint();
                    } else {
                        afterPrint();
                    }
                });
            }

## 批量打印 ##

<div ref="receiptJS" id="pdfdJS" style="display: none">
       <img ref="pdfdImg" id="pdfdImg" style="width: 100%" />
    </div>
    <el-button
    	type="primary"
    	icon="el-icon-printer"
    	size="mini"
    	id="pldyId"
    	@click="gprint"
    	>批量打印</el-button
    >
    //批量打印功能
    async gprint() {
    	let _this = this;
    	await this.createDIV("pdfdJS", "pdfdImg");
    	const loadingBatchPrint = this.$loading({
    		lock: true,
    		text: "正在打印中...",
    		spinner: "el-icon-loading",
    		background: "rgba(0, 0, 0, 0.7)",
    	});
    	await _this.printEventList();
    	await _this.handleQuery();
    	loadingBatchPrint.close();
    },
    // 批量打印
    async printEventList() {
    	let _this = this;
    	try {
    		//1. 获取nextID
    		const base64 = await nextPrint();
    		if (base64.code == 402) {
    			this.$message({
    				showClose: true,
    				message: "批量打印完成",
    				type: "success",
    			});
    			return false
    		} else if (base64.code !== 200) {
    			throw new Error(base64.msg);
    		}
    		//2 获取图片 base64 地址
    		const printRes = await fp_imgPrint(base64.img);
    		if (printRes.code !== 200) {
    			throw new Error(printRes.msg);
    		}
    		// 3. 调浏览器打印
    		await this.plPrint(printRes);
    	} catch (err) {
    		let { message } = err;
    		if (!message.includes("timeout")) {
    			this.$message({
    				showClose: true,
    				message: err,
    				type: "error",
    			});
    		}
    		return;
    	}
    },
    //批量打印，没有安装httpserver的情况
    plPrint(printRes) {
    	let box = document.getElementById("pdfdImg");
    	box.src = "data:image/jpg;base64," + printRes.msg;
    	this.$nextTick(() => {
    		box.onload = () => {
    			this.doPrint();
    		};
    	});
    },
    // 浏览器打印
    doPrint() {
    	//根据div标签ID拿到div中的局部内容
    	var jubuData = document.getElementById("pdfdJS").innerHTML;
    	// 将打印的区域赋值给新窗口body，进行打印
    	const newWindow = window.open("black.html");
    	newWindow.document.write(jubuData);
    	newWindow.window.print();
    	newWindow.window.close(); // 打印完成后关闭后新窗口
    	this.gprint();
    	return false;
    },
    /** 消除dom */
    /**
     * @param father 父
     * @param ownId  删除的div  id
     */
    createDIV(father, ownId) {
    	let box = document.getElementById(father);
    	document.getElementById("pdfdImg").remove();
    	let ple = document.createElement("img");
    	ple.setAttribute("id", "pdfdImg");
    	ple.setAttribute("ref", "pdfdImg");
    	ple.style.width = "100%";
    	box.appendChild(ple);
    },

[git]: https://gitee.com/Xbaiss/vue-pdf-word-excel
[Link 1]: http://mozilla.github.io/pdf.js/getting_started/#download
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70]: /images/20210813/8dcc566099d84f199d715764261f09d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1]: /images/20210813/effc3cf956fb4722b06213f68a1910e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 2]: /images/20210813/da8f0dc5d8c7425fbc19fdbd62c3037b.png
[Link 2]: https://github.com/mwilliamson/mammoth.js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 3]: /images/20210813/b893a3e52ee94b279ce618bc6f6b37af.png
[Link 3]: https://gitee.com/mirrors/sheetjs-js-xlsx?_from=gitee_search
[aeefdcd4a60105f3c776c870cdc7fad7.png]: /images/20210813/20ceced2d61e4f2cadabcabbbbd47c8b.png
[35370b05085650a11cecb20e601ed3f2.png]: /images/20210813/9e31807a9f2c4351b49c6d23d9782bfc.png
[641d28a6228691a23bbee716a0b70bd4.png]: /images/20210813/e2d646a7371d487e85884f01b9e49e33.png
[6517b4641265d80f1f740c17f418ffaf.png]: /images/20210813/c91929d15d89476abb208b6bb9d94061.png
[Link 4]: https://github.com/SheetJS/js-xlsx#cell-object
[d01cc25bcbc3c18c5024b5664824859b.png]: /images/20210813/02e335aef8c641be94d3d89fbab5d75d.png
[DEMO]: http://demo.haoji.me/2017/02/08-js-xlsx/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 4]: /images/20210813/16c2b8a390954d81ab8b58a6f558b429.png
[JavaScript_excel]: https://www.cnblogs.com/liuxianan/p/js-excel.html