txtView.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <template>
  2. <div class="txtView" v-loading="loading">
  3. <div class="tv_content" v-text="content"></div>
  4. </div>
  5. </template>
  6. <script>
  7. import "../../../../common/aws-sdk-2.235.1.min.js";
  8. const getFile = url => {
  9. return new Promise((resolve, reject) => {
  10. var credentials = {
  11. accessKeyId: "AKIATLPEDU37QV5CHLMH",
  12. secretAccessKey: "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"
  13. }; //秘钥形式的登录上传
  14. window.AWS.config.update(credentials);
  15. window.AWS.config.region = "cn-northwest-1"; //设置区域
  16. let url2 = url;
  17. let _url2 = "";
  18. if (
  19. url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
  20. ) {
  21. _url2 = url2.split(
  22. "https://view.officeapps.live.com/op/view.aspx?src="
  23. )[1];
  24. } else {
  25. _url2 = url2;
  26. }
  27. var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
  28. let name = decodeURIComponent(
  29. _url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
  30. );
  31. var params = {
  32. Bucket: "ccrb",
  33. Key: name
  34. };
  35. s3.getObject(params, function(err, data) {
  36. if (err) {
  37. console.log(err, err.stack);
  38. resolve({ data: 1 });
  39. } else {
  40. const fileContent = data.Body.toString("utf-8");
  41. resolve({ data: fileContent });
  42. } // sxuccessful response
  43. });
  44. // axios({
  45. });
  46. };
  47. export default {
  48. props: {
  49. url: {
  50. type: String,
  51. default: ""
  52. },
  53. },
  54. data(){
  55. return{
  56. content:"",
  57. loading:""
  58. }
  59. },
  60. methods: {
  61. getTxtContent() {
  62. if(!this.url)return;
  63. this.loading = true;
  64. getFile(this.url).then(res=>{
  65. this.loading = false;
  66. this.content = res.data;
  67. })
  68. },
  69. },
  70. watch:{
  71. url(newVal,oldVal){
  72. if(newVal!==oldVal){
  73. this.getTxtContent();
  74. }
  75. }
  76. },
  77. mounted(){
  78. this.getTxtContent();
  79. }
  80. };
  81. </script>
  82. <style scoped>
  83. .txtView{
  84. width: 100%;
  85. height: 100%;
  86. box-sizing: border-box;
  87. background-color: #ececec;
  88. padding: 0px 0px;
  89. }
  90. .tv_content{
  91. width: 100%;
  92. height: 100%;
  93. box-sizing: border-box;
  94. background-color: #fff;
  95. overflow: auto;
  96. word-wrap: break-word;
  97. border-radius: 3px;
  98. white-space: pre;
  99. box-sizing: border-box;
  100. padding: 10px;
  101. }
  102. </style>