pdf

前提是先下载并引进需求

1.下载： npm install vue-pdf --save-dev

2.引进：import pdf from "vue-pdf";

1.预览：

1. // data为后端给的base64格式的pdf

2. import { data } from "../../tempData";

3. import pdf from 'vue-pdf'

4. // 解决部分文字不显示的问题

5. import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'

6. // html

7. <pdf v-for="i in numPages" :key="i" :src="src" :page="i" ref="myPdfComponent"></pdf>

8. data () {

9. return {

10. src: '',

11. numPages: 0,

12. page: 1,

13. currentPage: 0

14. };

15. }，

16. components: {

17. pdf

18. },

19. mounted () {

20. let da = data.fileToBase64

21. let datas = 'data:application/pdf;base64,' + da

22. this.src = pdf.createLoadingTask({ url: datas, CMapReaderFactory });

23. this.src.promise.then(pdf => {

24. this.numPages = pdf.numPages;

25. });

26. },

2.下载：

1. //base64 转换 blob

2.  

3. dataURLtoBlob(dataurl) {

4.  

5. 　　var bstr = atob(dataurl)

6.  

7. 　　var n = bstr.length;

8.  

9. 　　var u8arr = new Uint8Array(n);

10.  

11. 　　while (n--) {

12.  

13. 　　　　u8arr[n] = bstr.charCodeAt(n);

14.  

15. 　　}

16.  

17. 　　return new Blob([u8arr], { type: 'pdf' });

18.  

19. }

20.  
21.  
22.  

23. // res.data   就是后台返回的base64的 文件流

24.  

25. let URL = this.dataURLtoBlob(res.data);

26.  

27. var reader = new FileReader();

28.  

29. 　　reader.readAsDataURL(URL);

30.  

31. 　　reader.onload = function (e) {

32.  

33. 　　　　// 兼容IE

34.  

35. 　　　　if (window.navigator.msSaveOrOpenBlob) {

36.  

37. 　　　　　　var bstr = atob(e.target.result.split(",")[1]);

38.  

39. 　　　　　　var n = bstr.length;

40.  

41. 　　　　　　var u8arr = new Uint8Array(n);

42.  

43. 　　　　　　while (n--) {

44.  

45. 　　　　　　　　u8arr[n] = bstr.charCodeAt(n);

46.  

47. 　　　　　　}

48.  

49. 　　　　　　var blob = new Blob([u8arr]);

50.  

51. 　　　　　　window.navigator.msSaveOrOpenBlob(blob,'采购单.pdf');

52.  

53. 　　　　} else {

54.  

55. 　　　　　　// 转换完成，创建一个a标签用于下载

56.  

57. 　　　　　　const a = document.createElement('a');

58.  

59. 　　　　　　a.download = '采购单.pdf'; // 这里写你的文件名

60.  

61. 　　　　　　a.href = e.target.result;

62.  

63. 　　　　　　document.body.appendChild(a)

64.  

65. 　　　　　　a.click();

66.  

67. 　　　　　　document.body.removeChild(a)

68.  

69. 　　}

70.  

71. }

 

转载于：vue 将base64 的文件流转换成pdf 并下载， 兼容 IE10+          vue-pdf预览base64数据为pdf