vue文件在服务器上乱码,解决vue-pdf查看pdf文件及打印乱码的问题

前言

vue中简单使用vue-pdf预览pdf文件，解决打印预览乱码问题

vue-pdf 使用

安装

npm install --save vue-pdf

引入

import pdf from "vue-pdf

自定义封装pdf预览组件

:visible.sync="pdfDialog"

:close-on-click-modal="false"

:show-close="false"

width="900px"

top="52px"

>

@click="changePdfPage(0)"

class="currentPage"

:class="{ grey: currentPage == 1 }"

>上一页  

>

{ { currentPage }} / { { pageCount }}

@click="changePdfPage(1)"

class="currentPage"

:class="{ grey: currentPage == pageCount }"

>  下一页

>    下载

style="float :right;padding-right:40px;font-size: 20px;color: #8c8e92;cursor: pointer;"

@click="close"

>

>

ref="pdf"

:src="src"

:page="currentPage"

@num-pages="pageCount = $event"

@page-loaded="currentPage = $event"

@loaded="loadPdfHandler"

>

import pdf from "vue-pdf";

export default {

components: { pdf },

props: ["src"],

data() {

return {

filesProps: {

label: "originName"

},

pdfDialog: false,

currentPage: 0, // pdf文件页码

pageCount: 0, // pdf文件总页数

fileType: "pdf" // 文件类型

};

},

methods: {

// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页

changePdfPage(val) {

if (val === 0 && this.currentPage > 1) {

this.currentPage--;

}

if (val === 1 && this.currentPage < this.pageCount) {

this.currentPage++;

}

},

// pdf加载时

loadPdfHandler() {

this.currentPage = 1; // 加载的时候先加载第一页

},

handleOpen() {

this.pdfDialog = true;

},

//关闭弹框

close() {

this.pdfDialog = false;

}

}

};

.currentPage {

cursor: pointer;

color: #8c8e92;

}

.currentPage:hover {

color: #2761ff;

}

.arrow{

position: fixed;

top: 0px;

left :0px;

z-index: 2;

width: 100%;

background-color: #191919;

padding: 12px 0;

margin: 0;

text-align :center;

}

>>>.el-dialog__body {

color: #606266;

font-size: 14px;

padding:0;

}

使用

style="font-style:oblique;font-size: 18px;"

@click="handlePreviewFile"

>PDF 预览

>

style="float: right;line-height: 40px;padding: 3px;"

type="text"

@click="handleSafetyExperience"

>返回

>

import PdfPreview from "../widget/PdfPreview";

export default {